Meshery uses Playwright for e2e testing.

In this article, we review some Playwright code snippets in Meshery codebase. We will look at:

1. What is Playwright?

2. Playwright configuration in Meshery.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Meshery codebase and wrote this article.

What is Playwright?

Playwright enables reliable end-to-end testing for modern web apps. The following are Playwright features:

Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.

Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed.

Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java.

Test Mobile Web. Native mobile emulation of Google Chrome for Android and Mobile Safari. The same rendering engine works on your Desktop and in the Cloud.

Auto-wait. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts — the primary cause of flaky tests.

Web-first assertions. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.

Tracing. Configure test retry strategy, capture execution trace, videos, screenshots to eliminate flakes.

and much more. Learn more about Playwright.

I picked this above information from https://playwright.dev/

Install

Run the below command:

npm init playwright@latest

When prompted, choose / confirm:

• TypeScript or JavaScript (default: TypeScript)

• Tests folder name (default: tests, or e2e if tests already exists)

• Add a GitHub Actions workflow (recommended for CI)

• Install Playwright browsers (default: yes)

You can re-run the command later; it does not overwrite existing tests.

When you run this command, the following files are created:

playwright.config.ts         # Test configuration
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # Minimal example test
tests-examples/
  demo-todo-app.spec.ts      # Richer example tests

tests/ contains a minimal starter test. tests-examples/ provides richer samples (e.g. a todo app) to explore patterns.

Playwright configuration in Meshery.

You will find the Meshery playwright configuration at meshery/ui/playwright.config.ts.

And the tests are written in tests/e2e folder.

I chose a simple example to demonstrate playwright usage in Meshery by picking the logout.spec.js.

import { expect, test } from '@playwright/test';
import { DashboardPage } from './pages/DashboardPage';
 
test.describe('Logout Page Tests', () => {
  let dashboardPage;
  test.beforeEach(async ({ page }) => {
    dashboardPage = new DashboardPage(page);
    await dashboardPage.navigateToDashboard();
  });
  test('Logout from current user session', async ({ page }) => {
    await page.route('/user/logout', (route) => {
      route.fulfill({
        status: 302,
        headers: {
          Location: '/provider',
        },
      });
    });
 
    const waitForLogoutRequest = page.waitForRequest('/user/logout');
 
    await dashboardPage.navigateToLogout();
 
    const request = await waitForLogoutRequest;
    expect(request.url()).toContain('/user/logout');
 
    await page.waitForURL('/provider');
    expect(page.url()).toContain(`/provider`);
  });
});

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://playwright.dev/

2. https://github.com/meshery/meshery/blob/34880913571d20a72d77c93390a7a9bee1783b90/ui/playwright.config.js

3. https://github.com/meshery/meshery/blob/34880913571d20a72d77c93390a7a9bee1783b90/ui/tests/e2e/logout.spec.js