Automated Testing with Playwright and WonderProxy

Playwright is a free and Open Source test automation tool for web browsers like Chrome, Edge, and Firefox. Developed by Microsoft, Playwright supports Python, NodeJS, Java, and .NET. Playwright can combine with WonderProxy to deliver localized test automation — with geoIP and redirection — all from a single laptop, Continuous Integration server, or elsewhere in the cloud.

For the code samples and setup instructions below, we'll use a working demo, available on Github, that runs a few tests against the WonderNetwork GeoTest page.

Step 1: Set up your local Playwright environment

1. You'll need NodeJS v12 or higher.

   
   $ node -v
   
   

   If you don't have it installed, you can download it for your platform at the official site.
2. If you're setting up a new project, create a new directory and initialize npm. When you're asked for a test command, use npx playwright test.

   
   $ mkdir playwright-project
   $ cd playwright-project
   $ npm init
   
   

3. Set up Playwright in your project:

   
   $ npx gitignore node                      # create a .gitignore file with sensible defaults
   $ npm install --save-dev @playwright/test # install Playwright as a dev dependency
   $ npx playwright install                  # install the browsers for Playwright
   $ mkdir test                              # create the directory for your tests
   
   

Step 2: Configure Playwright to use WonderProxy

Writing Playwright tests is extensively covered in the official documentation, so we won't go in depth on the topic here. Instead, we'll focus on integrating WonderProxy using Playwright Test's local configuration settings. The test.use() interface allows testers to customize browser configurations; in our case, we will customize Playwright to proxy its connections through a WonderProxy server.

The Playwright tests read your WonderProxy credentials from the local environment, so set that up first:

$ export WONDERPROXY_USER=yourusername
$ export WONDERPROXY_TOKEN=yourproxytoken

In the code sample below, we pass a proxy server (denver.wonderproxy.com:11000) and our credentials into the test.use() method as a TestOptions.proxy definition. test.use() configures the page that our tests will use later, so all requests will be directed through the proxy server.

// use the proxy for each test
const server = 'denver.wonderproxy.com:11000';

test.use({
    proxy: {
        server: `http://${server}`,
        username: process.env.WONDERPROXY_USER,
        password: process.env.WONDERPROXY_TOKEN
    }
});

Step 3: Write tests

Now that we know how to configure Playwright to shunt connections through WonderProxy, we can write some tests using the proxied driver.

Playwright does not support table-driven, or "parameterized", tests (tests that can be run multiple times with varied input) out of the box, but we can fake it with a loop. First, define an array with all the locations you want to use for your tests:

const { test, expect } = require('@playwright/test');

const locations = [
    { title: 'Albuquerque', server: 'albuquerque.wonderproxy.com:11000' },
    { title: 'Toronto', server: 'toronto.wonderproxy.com:11000' },
    { title: 'Vancouver', server: 'vancouver.wonderproxy.com:11000' },
];

Make sure you've added all the locations you want to use to your WonderProxy account!

Loop through your array to define a test "group" for each location:

for (const location of locations) {
    test.describe(`The WonderNetwork Geotest page from ${location.server}`, () => {

        // use the proxy for each test
        test.use({
            proxy: {
                server: `http://${location.server}`,
                username: process.env.WONDERPROXY_USER,
                password: process.env.WONDERPROXY_TOKEN
            }
        });

        // todo: write some tests
    });
}

Now that the groups are defined, we can write the actual tests. From each location, we want to

1. load https://wondernetwork.com/geotest,
2. check that the title is correct, and
3. check that the displayed city matches the location for the group.

Playwright has a handy test.beforeEach() method that can configure the test page before any tests run. We'll use that to navigate to our test page, then write tests for our two checks:

test.beforeEach(async ({ page }) => {
    await page.goto('https://wondernetwork.com/geotest');
});

test('has the right title', async ({page}) => {
    await expect(page).toHaveTitle('Geotest - WonderNetwork');
});

test(`displays ${location.title} as the city`, async ({page}) => {
    const cityLocator = await page.locator('#user-city');

    await expect(cityLocator).toHaveText(location.title);
});

Step 4: Get testing!

We configured npm's default test command to run npx playwright test, and we already added our proxy credentials to the environment, so we can run the tests normally:

$ npm test

Playwright runs each test from each location, and displays output that knits all our test descriptions together:

> playwright-wp@1.0.0 test
> npx playwright test


Running 6 tests using 1 worker

✓  test/WonderProxy.spec.js:29:9 › The WonderNetwork Geotest page from albuquerque.wonderproxy.com:11000 has the right title (4s)
✓  test/WonderProxy.spec.js:33:9 › The WonderNetwork Geotest page from albuquerque.wonderproxy.com:11000 displays Albuquerque as the city (4s)
✓  test/WonderProxy.spec.js:29:9 › The WonderNetwork Geotest page from toronto.wonderproxy.com:11000 has the right title (3s)
✓  test/WonderProxy.spec.js:33:9 › The WonderNetwork Geotest page from toronto.wonderproxy.com:11000 displays Toronto as the city (3s)
✓  test/WonderProxy.spec.js:29:9 › The WonderNetwork Geotest page from vancouver.wonderproxy.com:11000 has the right title (4s)
✓  test/WonderProxy.spec.js:33:9 › The WonderNetwork Geotest page from vancouver.wonderproxy.com:11000 displays Vancouver as the city (4s)

Slow test: test/WonderProxy.spec.js (23s)

6 passed (24s)

Playwright can run most modern browsers, headless or with a full browser render. The default browser to run the tests is Chromium, but you can select other browsers too. You can configure your browsers on the command-line:

$ npx playwright test --headed          # run tests with a full graphical interface for the browser
$ npx playwright test --browser=all     # run tests with all the installed browsers
$ npx playwright test --browser=firefox # run tests with only firefox

These code samples are part of a working demo, which is available on Github.