Button

getButton

Check if a button is visible on the page, identified by the text content.

Utility Function

await getButton(page, <BUTTON TEXT>)

Playwright

await expect(page.getByRole("button", { name: <BUTTON TEXT>, exact: true })).toBeVisible();

Parameters

string | number

tip

Make sure the string / number you add is exact (including correct case) otherwise this test will fail.

Use getButtonPartialMatch for a more leniant selector

import { getButton } from "foreplaywright";

export async function layoutCheck(page) {
  await getButton(page, "Text of your button");
}

getButtonPartialMatch

Check if a button is visible on the page, identified by the text content.

Your string doesn't have to be exact

Utility Function

await getButton(page, <BUTTON TEXT>)

Playwright

await expect(page.getByRole("button", { name: <BUTTON TEXT>})).toBeVisible();

Parameters

string | number

tip

Your parameter does not have to be a full string, or captialised correctly

import { getButtonPartialMatch } from "foreplaywright";

export async function layoutCheck(page) {
  await getButtonPartialMatch(page, "Text of your button");
}

clickButton

Click a button that is visible on the page, identified by the text content.

Utility Function

await clickButton(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT>, exact: true }).click(); 
await page.waitForLoadState("load");

Parameters

string | number

Not only click the button but auto wait for the load to complete.

This means the test will wait until the page is ready for the next action.

tip

Make sure the string / number you add is exact (including correct case) otherwise this test will fail.

Use clickButtonPartialMatch for a more leniant selector

import { clickButton } from "foreplaywright";

export async function layoutCheck(page) {
  await clickButton(page, "Text of your button");
}

clickButtonPartialMatch

Click a button that is visible on the page, identified by the text content.

Utility Function

await clickButtonPartialMatch(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT> }).click(); 
await page.waitForLoadState("load");

Parameters

string | number

Not only click the button but auto wait for the load to complete.

This means the test will wait until the page is ready for the next action.

tip

Your parameter does not have to be a full string, or captialised correctly

import { clickButtonPartialMatch } from "foreplaywright";

export async function layoutCheck(page) {
  await clickButtonPartialMatch(page, "text of yoUr buTt");
}

hoverButton

Hover a button that is visible on the page, identified by the text content.

Utility Function

await hoverButton(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT>, exact: true }).hover(); 

Parameters

string | number

tip

Make sure the string / number you add is exact (including correct case) otherwise this test will fail.

Use hoverButtonPartialMatch for a more leniant selector

import { hoverButton } from "foreplaywright";

export async function layoutCheck(page) {
  await hoverButton(page, "Text of your button");
}

hoverButtonPartialMatch

Hover a button that is visible on the page, identified by the text content.

Utility Function

await hoverButtonPartialMatch(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT> }).hover(); 

Parameters

string | number

tip

Your parameter does not have to be a full string, or captialised correctly

import { hoverButtonPartialMatch } from "foreplaywright";

export async function layoutCheck(page) {
  await hoverButtonPartialMatch(page, "text of yoUr buTt");
}

scrollToButton

Scroll the page til this button is within the viewport.

Utility Function

await scrollToButton(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT>, exact: true }).scrollIntoViewIfNeeded(); 

Parameters

string | number

tip

Make sure the string / number you add is exact (including correct case) otherwise this test will fail.

Use scrollToButtonPartialMatch for a more leniant selector

import { scrollToButton } from "foreplaywright";

export async function layoutCheck(page) {
  await scrollToButton(page, "Text of your button");
}

scrollToButtonPartialMatch

Scroll the page til this button is within the viewport.

Utility Function

await scrollToButtonPartialMatch(page, <BUTTON TEXT>)

Playwright

await page.getByRole("button", { name: <BUTTON TEXT> }).scrollIntoViewIfNeeded(); 

Parameters

string | number

tip

Your parameter does not have to be a full string, or captialised correctly

import { scrollToButtonPartialMatch } from "foreplaywright";

export async function layoutCheck(page) {
  await scrollToButtonPartialMatch(page, "text of yoUr buTt");
}