[Automation Testing] Use Playwright to test cloudolife.com automatically

Posted on Edited on In , , Views: Word count in article: 4.7k Reading time ≈ 4 mins.

Playwright

Playwright enables reliable end-to-end testing for modern web apps. It enables fast, reliable and capable automation across all modern browsers.

Features

There are some important features on Playwright.

  • Test across all modern browsers

    Single API to automate Chromium, Firefox and WebKit.

    With Playwright, test how your app behaves in Apple Safari with WebKit builds for Windows, Linux and macOS. Test locally and on CI.

    Test for mobile. Use device emulation to test your responsive web apps in mobile web browsers.

    Playwright supports headless (without browser UI) and headful (with browser UI) modes for all browsers and all platforms.

  • Fast and reliable execution

    Auto-wait APIs. Playwright interactions auto-wait for elements to be ready. This improves reliability and simplifies test authoring.

    Timeout-free automation. Playwright receives browser signals, like network requests, page navigations and page load events to eliminate the need for sleep timeouts that cause flakiness.

    Lean parallelization with browser contexts. Reuse a single browser instance for multiple parallelized, isolated execution environments with browser contexts.

    Resilient element selectors. Playwright can rely on user-facing strings, like text content and accessibility labels to select elements. These strings are more resilient than selectors tightly-coupled to the DOM structure.

  • Automate without trade-offs

    Capable automation for single page apps that rely on the modern web platform.

    Multiple domains, pages and frames. Playwright is an out-of-process automation driver that is not limited by the scope of in-page JavaScript execution and can automate scenarios with multiple pages.

    Powerful network control. Playwright introduces context-wide network interception to stub and mock network requests.

    Modern web features. Playwright supports web components through shadow-piercing selectors, geolocation, permissions, web workers and other modern web APIs.

    Capabilities to cover all scenarios. Support for file downloads and uploads, out-of-process iframes, native input events, and even dark mode.

  • Integrates with your workflow

    One-line installation. Installing Playwright auto-downloads browser dependencies for your team to be onboarded quickly.

    Use in your preferred language. Use the Playwright API in JavaScript & TypeScript, Python, C# and, Java.

    Debugging tools. Playwright works with the editor debugger and browser developer tools to pause execution and inspect the web page.

    Deploy tests to CI. First-party Docker image and GitHub Actions to deploy tests to your preferred CI/CD provider.

Prerequisites

  • Node.js

    Playwright requires Node.js version 10.17 or above.

Installaltion

Use npm to install Playwright in your Node.js project.

1
2
3
4
# (Optional) Make a workspace folder and initialize npm package.json.
# mkdir col-playwright && cd col-playwright && npm init

$ npm i -D playwright

Once installed, you can require Playwright in a Node.js script, and launch any of the 3 browsers (chromium, firefox and webkit) by default.

Script

In the next script, we will navigate to Cloud-oriented Life - http://cloudolife.com/ and take a screenshot in WebKit.

1
2
3
4
5
6
7
8
9
10
11
// index.js

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('http://cloudolife.com/');
  await page.screenshot({ path: `cloudolife.png` });
  await browser.close();
})();

By default, Playwright runs the browsers in headless mode. To see the browser UI, pass the headless: false flag while launching the browser. You can also use slowMo to slow down execution.

1
webkit.launch({ headless: false, slowMo: 50 });

This code snippet navigates to Cloud-oriented Life - http://cloudolife.com/ in Chromium, Firefox and WebKit, and saves 3 screenshots.

1
2
3
4
5
6
7
8
9
10
11
12
13
// index.js
const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox', 'webkit']) {
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('http://cloudolife.com/');
    await page.screenshot({ path: `cloudolife-${browserType}.png` });
    await browser.close();
  }
})();

Run

Run index.js with node command.

1
$ node index.js

Or run index.js with npm run script.

First, edit and append the follow content in the package.json file.

1
2
3
4
5
6
7
8
$ cat package.json
{
    ...
    "scripts": {
        "test": "node index.js"
    }
    ...
}

Then, run with npm script.

1
$ npm run test

You will see the screenshots.

Limitations

  • Legacy Edge and IE11 support.

    Playwright does not support legacy Microsoft Edge or IE11 (deprecation notice). The new Microsoft Edge (on Chromium) is supported.

  • Test on real mobile devices:

    Playwright uses desktop browsers to emulate mobile devices.

References

[1] Fast and reliable end-to-end testing for modern web apps | Playwright - https://playwright.dev/

[2] GitHub - microsoft/playwright: Node.js library to automate Chromium, Firefox and WebKit with a single API - https://github.com/microsoft/playwright

[3] playwright - npm - https://www.npmjs.com/package/playwright

[4] playwright | Yarn - Package Manager - https://yarnpkg.com/package/playwright