Playwright/Test integration with an Aerokube Moon
Hi colleagues,
No, this is not a promotional article. At least they didn’t pay me:)
In this article I want to consider an example of how you can use a Cloud browsers solution that helps you run web automation tests in parallel with the different browsers. As project example, I have chosen Playwight. First, it’s very popular today and second, configuration is a little bit different from Selenium.
Before we jump into project configuration, let’s first try to understand what a “Moon” is.
What is a Moon?
Aerokube Moon is an automation solution designed for running web tests in a distributed environment. It can run parallel tests across multiple machines or containers.
Aerokube Moon offers several features that make it a powerful tool for running tests at scale, including:
- Parallel test execution: Aerokube Moon can run tests in parallel across multiple machines or containers to reduce overall test execution time.
- Dynamic test distribution: Aerokube Moon can dynamically distribute tests across available nodes to optimize test execution and reduce test bottlenecks.
- Real-time reporting: Aerokube Moon provides real-time reporting of test results and progress, allowing you to quickly identify and address test failures.
- Flexible integration: Aerokube Moon can be integrated with a variety of test frameworks and tools, including Selenium, Cypress, Playwright, and Puppeteer.
Overall, Aerokube Moon is a powerful and flexible tool for running web tests at scale and is a popular choice for teams that need to run tests across multiple environments or need to reduce overall test execution time.
Moon pricing
The official website https://aerokube.com/moon/ offers a calculator where you can easily try to understand the prices.
At this point, you can select Duration and Parallel Session
Also, the website shows you can request a one-month free account.
Be ready, sales will get you:)
Note: I was not involved in the purchase licensing process, so I can only judge based on open information.
Moon installation
I don’t want to spend a lot of time here, the official documentation contains step-by-step instructions on how you can install this solution https://aerokube.com/moon/latest/#install.
They also provide support. You can contact them through the various channels.
Playwright integration
As it was mentioned before, Moon can be integrated with a variety of test frameworks and tools, including Selenium, Cypress, Playwright, and Puppeteer.
This article is dedicated to Playwright-specific integration because it’s a little different than integration with Selenium.
Basically, there are two ways to do this, using code or within Playwright.config. I’d prefer to use configuration integration. However, we will consider both approaches.
Let’s start with code examples
Integration through code
Playwright browsers are available on Moon out of the box. The only difference it uses WebSocket instead of an HTTP URL
‘wss://moon.example.com/playwright/firefox/playwright-1.23.3’
You should know is by default, Moon will use quay.io/playwright-<browser-name> the repository to download images https://quay.io/search?q=playwright
And here is the most important to remember when you pass the browser URL it should, the playwright version should be the same as the package Playwright version
To avoid static version problems, I recommend that you create a function that parses the package version and passes it as a browser parameter. In my example, I will add it directly to the test. But it will be nice to create it as a specific function
From the screen above, you can see that the first arrow function takes the “@playwright/test” package value and removes the unnecessary symbol
Then we just pass that version to the chromiumWsEndpoint const.
Now we should create a browser connection in the code and pass this “wsEndpoint”.
Note: The “connect” method is deprecated, so there will probably be another similar method.
As you may understand, this was an example of the “chromium” browser. If you need to use a different browser, then you would make a call to, say, “firefox.connect” and the “chromium” part of the URL to “firefox”.
`wss://<moon_server>/playwright/chromium/playwright-1.33.0`
to
`wss://<moon_server>/playwright/firefox/playwright-1.33.0`
That’s all. Now you are ready to run. But first, let’s do an alternative setup using the configuration
Integration through Playwright config
We already know how to build the WSS URL and remember that it should be the same version as the Playwright package.
Basically, in Playwright.config, we repeated the same part of the code we had in the test
We are close to the finish line
It is left only to add “connectionOptions” with “wsEnpoint” and that’s it.
And now, we don’t need to open a connection in the tests. We just use a page.
We are ready
Test run
You can perform test runs with the “npx playwright test” command. This will trigger a Playwright test run.
Now we can go to the moon server. As you can see, it shows us two “chromium” browser instances running in parallel:
Additional capabilities
In the previous step, we considered a very basic run with default options. But what if we want to add additional options? For example, disable headless mode.
Playwright has no capabilities concept compared to Selenium. The only way to request an exact browser version or environment variables is to pass all these requirements in the web socket endpoint URL.
In the example above I added the “?headless=false” query param to the WSS URL.
Let’s run the tests against the moon server and navigate to the moon server and expand the “chronium” session. VNC will show us actions in the browser.
There are much more options available: https://aerokube.com/moon/latest/#playwright-additional-features
As an example, you may want to enable the recording of the video.
Conclusion:
That’s it. As you can see, it is very easy if you know what to do. Now you can easily apply it to continuous integration pipelines. I hope it will save you time or at least broaden your horizons. Thanks for reading.
