playwright-tests

Testing Guide

This project uses playwright for end-to-end testing. Please become familiar with this documentation.

Writing tests

Tests should be written for each change or addition to the codebase. If a new feature is introduced, tests should be written to validate its functionality. If a bug is fixed, tests should be written to prevent regression. Writing tests not only safeguards against future breaks by other developers but also accelerates development by minimizing manual coding and browser interactions.

When writing tests, remember to:

• Test user-visible behavior
• Make tests as isolated as possible
• Avoid testing third-party dependencies

LEARN BEST PRACTICES

See the cookbook for help in covering scenerios. It is possible to generate tests via the VS Code Extension.

Running tests

To run the tests, you may do so through the command line:

npm run test

With playwright's interactive testing UI:

npm run test:ui

Or through VS Code, see Getting started - VS Code.

Recording video

You may automatically record video with your tests by setting

use: {
  video: "on"
}

in the playwright.config.js. After running tests, you will find the output as a .webm in ./test-results. Then, convert to MP4 and share.

It is encouraged to include video in pull requests in order to demonstrate functionality and prove thorough testing.

Cookbook

Using storage states

In order to represent different roles via an authenticated NEAR wallet, you can mock logins through storage states. These set values in local storage mocking what would typically be set through near-wallet-selector.

test.describe("User is logged in", () => {

  ...before each

  test.use({
    storageState: "playwright-tests/storage-states/wallet-connected.json",
  });

  ...your tests
});

See the available storage states in ./storage-states.

Mocking fetch requests

If you are testing a component that makes fetch requests, you can mock them using the fetch API.

await page.route("**/api/hello", (route) => {
  return route.fulfill({
    status: 200,
    body: "Hello, World!",
  });
});

Currently, we add this to the beforeEach hook in the test file. This way we do not have to mock the requests for every test.