Playwright

This is a shortened version of the Playwright Page documention with methods that may be most frequently used when testing with GuardianTest.

The Page class provides methods to interact with a tab within a browser instance.

Methods

evaluate

Returns the result of running a function in the page context.

Usage

You can pass an argument to the function or you can evaluate strings as functions.

const result = await page.evaluate(([a, b]) => {
    return Promise.resolve(a + b);
}, [1, 2]);
console.log(result); // 3

const result = await page.evaluate("1 + 2");
console.log(result); // 3

getByAltText

Locate elements by their alt text

Usage

<img alt="GuardianUI Example">

page.getByAltText("GuardianUI Example").click();

getByLabel

Locate elements by their label, or aria-label

Usage

<input aria-label="Token Input">

page.getByLabel("Token Input").fill("100");

getByPlaceholder

Locate elements by their placeholder content

Usage

<input type="text" placeholder="name">

page.getByPlaceholder("name").fill("John");

getByTestId

Locate element by the data-testid

Usage

<button data-testid="submit">

page.getByTestId("submit").click();

getByText

Locate elements that have certain text

Usage

<div>Hello</div>

page.getByText("Hello");

getByTitle

Locate elements that have a certain title attribute

Usage

<span title="Test Title">

page.getByTitle("Test Title");

goto

Navigate to a URL

Usage

await page.goto("https://www.guardianui.com");

locator

This is a very commonly used method in tests. It returns an element locator object that can be used to perform actions on the page

Usage

page.locator("button:has-text('Demo Button')");
await page.locator("text=Connect").click();

route

Provides the ability to modify network requests. Every request matching a URL pattern will stall unless it's continued, fulfilled, or aborted.

Usage

// Mock a Graph response
await page.route("https://gateway.thegraph.com/api/**", route => {
    route.fulfill({
        body: {
            data: {
                "mocked-data"
            }
        }
    });
});

screenshot

Takes a screenshot

Usage

await page.screenshot();
await page.screenshot(options);

Events

on("console")

Emitted when the page calls either console.log, console.error, console.warn, or console.dir

Usage

page.on("console", msg => {
    console.log(msg);
});