Argos CI + Playwright: Part 2

In visual testing, it is important to maintain uniformity of display across different browsers. Let’s explore how you can run the tests on multiple browsers.

Continuing with our existing repo from Part 1 - https://github.com/Nav-2d/argos-pw

• Open `playwright.config.ts` and add new browsers to the list of projects.

export default defineConfig({
  // ... other configuration
  projects: [
    // new browsers
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    // existing browsers
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

• Add a new test in `example.spec.ts` which will capture screenshots on multiple browsers. But you need to make sure that each screenshot has a unique name, if not, the existing one will be overridden. We will use `project.name` value from `testInfo` to construct unique names.

test('screenshot pages', async ({ page }, testInfo) => {
  const browserName = testInfo.project.name;
  await page.goto('https://playwright.dev/');
  await argosScreenshot(page, `pw-home-${browserName}`);
});

• Push your changes as part of a new branch and create a pull request to trigger a build.

• You can click on “Inspect” or “Review” from the comment in the pull request. You will notice that 3 screenshots were added for our new test. For our existing test, the screenshot is unchanged. Since we didn’t pass a unique name `argosScreenshot(page, 'homepage')`, the screenshot was overridden and no new screenshots were added.

---

Useful resources:

• Repo link - https://github.com/Nav-2d/argos-pw

• Example build - https://app.argos-ci.com/nav-2d/argos-pw/builds/5/77730244

• TestInfo - https://playwright.dev/docs/api/class-testinfo

---