How to install and use Playwright CLI on macOS 11

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

It’s possible to generate code with Playwright library making use of Playwright CLI. The code is based on user actions on a browser making it easy to create code for testing different functionalities.

Problems with macOS 11

When trying to execute the CLI on macOS 11, we end up with the following result:

UnhandledPromiseRejectionWarning: Error: ERROR: Playwright does not support firefox on mac11.0

Playwright does not support Firefox on macOS 11, As a matter of fact, it also does not support Chromium and Webkit.

Upon researching, I found the #2789 closed issue that points out the lack of support to macOS 11, but this modification hasn’t been added to the latest version yet.

Installing playwright-cli

To be able to run Playwright CLI, you will need to install it with Playwright on version 1.6.0-next.160408727976 (a pre-release of version 1.6.0). To install playwright-cli with support to macOS 11, execute the following commands:

git clone -b release-0.150 https://github.com/microsoft/playwright-cli.git
cd playwright-cli
sed -i '' 's/"playwright": "=1.5.2"/"playwright": "=1.6.0-next.1604087279768"/g' package.json
npm install
npm run build
npm run bake-mac

Right now you should have a binary in ./out/binary/mac/playwright-cli! You can check it’s version with:

./out/binary/mac/playwright-cli --version

To be able to use it globally, you can move it to /usr/local/bin:

mv ./out/binary/mac/playwright-cli /usr/local/bin

Generating code

Now we can finally use the CLI to generate code. By running

playwright-cli codegen wikipedia.com

we can generate code that simulates our interactions with the browser.

Here’s the generated code:

With the generated code, it’s fairly simple to modified it so it can be used in tests. Some interactions comes with a possible assertion — e.g.:

assert.equal(page.url(), ‘https://en.wikipedia.org/wiki/Software_testing');

Using the generated code

To run the code, start creating a project with:

mkdir playwright_test
cd playwright_test
npm add playwright@1.6.0-next.1604087279768

Add the generated code in a file and execute it with node:

node generated_code.js

Here’s the code used for the example above:

Conclusion

In general is a very good tool, it can generate very usable code with little effort and, with few modifications, can be used to run tests. It even generates some useful assertions in the form of comments, helping even further on creating tests.

On the other hand, having to go through all this trouble just to run on macOS 11 wasn’t a very good sign. Since the issue had already been resolved, it’s expected that it should have been updated sooner.

The comments with assertions also needs to be updated. It still uses the equal() function, which is deprecated since v9.9.0 (strictEqual() is used instead).