expected-condition-playwright

Expected Condition

expected-condition-playwright is a Node.js library for Playwright and Puppeteer that supplies a set of common conditions that provides functionalities to wait for certain conditions till a defined task is complete.

Table of Contents

• Expected Condition
  • Table of Contents
  • Getting Started
    • Installation
    • Import and usage
  • Types of Expected Conditions
    • attributeValueToBe
    • attributeValueContains
    • attributeToBeNotEmpty
    • numberOfElementsToBe
    • invisibilityOf
    • textToBePresentInElement
    • textToBePresentInElementValue
    • elementToBeClickable
    • elementToBeSelected
    • titleEquals
    • titleContains
    • urlEquals
    • urlContains
  • License

Getting Started

Installation

To use expected-condition-playwright in your project, run:

npm i -D expected-condition-playwright

Import and usage

TypeScript

// Import ExpectedCondition class as EC shortcut
import { ExpectedCondition as EC } from 'expected-condition-playwright';

// Simple selector
const submitButton = 'button';

// Use page's waitForFunction method to provide the elementToBeClickable method to instruct a command to wait until the element is clickable by the selector
await page.waitForFunction(EC.elementToBeClickable(submitButton), submitButton, { timeout: 5000 });

JavaScript

// Require ExpectedCondition class as EC shortcut
const { ExpectedCondition: EC } = require('expected-condition-playwright');

// Simple selector
const submitButton = 'button';

// Use page's waitForFunction method to provide the elementToBeClickable method to instruct a command to wait until the element is clickable by the selector
await page.waitForFunction(EC.elementToBeClickable(submitButton), submitButton, { timeout: 5000 });

Types of Expected Conditions

attributeValueToBe

An expectation for checking element with given selector has attribute with a specific value

Usage

const inputSelector = 'input[type=q]';
const expectedAttribute = 'type';
const expectedValue = 'q';

await page.waitForFunction(
  EC.attributeValueToBe([inputSelector, expectedAttribute, expectedValue]),
  [inputSelector, expectedAttribute, expectedValue],
  { timeout: 5000 },
);

attributeValueContains

An expectation for checking element with given selector has attribute which contains a specific value

Usage

const inputSelector = 'input[type=que]';
const expectedAttribute = 'type';
const expectedValue = 'q';

await page.waitForFunction(
  EC.attributeValueContains([inputSelector, expectedAttribute, expectedValue]),
  [inputSelector, expectedAttribute, expectedValue],
  { timeout: 5000 },
);

attributeToBeNotEmpty

An expectation for checking element with given selector any non empty value for given attribute

Usage

const inputSelector = 'input[type=que]';
const expectedAttribute = 'type';

await page.waitForFunction(
  EC.attributeValueContains([inputSelector, expectedAttribute]),
  [inputSelector, expectedAttribute],
  { timeout: 5000 },
);

numberOfElementsToBe

An expectation for checking number of elements with given selector

Usage

const links = 'a';
const expectedNumber = '12';

await page.waitForFunction(EC.numberOfElementsToBe([links, expectedNumber]), [links, expectedNumber], {
  timeout: 5000,
});

invisibilityOf

An expectation for checking the element to be invisible

Usage

const link = 'a';

await page.waitForFunction(EC.invisibilityOf(link), links, { timeout: 5000 });

textToBePresentInElement

An expectation for checking if the given text is present in the specified element.

Usage

const logInButton = 'button';
const expectedText = 'Log in';

await page.waitForFunction(EC.textToBePresentInElement([logInButton, expectedText]), [logInButton, expectedText], {
  timeout: 5000,
});

textToBePresentInElementValue

An expectation for checking if the given text is present in the specified elements value attribute.

Usage

const userField = 'input';
const expectedValue = 'John';

await page.waitForFunction(EC.textToBePresentInElementValue([userField, expectedValue]), [userField, expectedValue], {
  timeout: 5000,
});

elementToBeClickable

An expectation for checking the element is visible and enabled such that you can click it.

Usage

const nextButton = 'button';

await page.waitForFunction(EC.elementToBeClickable(nextButton), nextButton, { timeout: 5000 });

elementToBeSelected

An expectation for checking the element is visible and enabled such that you can click it.

Usage

const checkbox = 'input';

await page.waitForFunction(EC.elementToBeSelected(checkbox), checkbox, { timeout: 5000 });

titleEquals

An expectation for checking the title of a page.

Usage

const expectedTitle = 'Playwright';

await page.waitForFunction(EC.titleEquals(expectedTitle), expectedTitle, { timeout: 5000 });

titleContains

An expectation for checking that the title contains a case-sensitive substring

Usage

const expectedTitle = 'Play';

await page.waitForFunction(EC.titleContains(expectedTitle), expectedTitle, { timeout: 5000 });

urlEquals

An expectation for the URL of the current page to be a specific url.

Usage

const expectedUrl = 'http://github.com/';

await page.waitForFunction(EC.urlEquals(expectedUrl), expectedUrl, { timeout: 5000 });

urlContains

An expectation for the URL of the current page to contain specific text.

Usage

const expectedUrl = '.com';

await page.waitForFunction(EC.urlContains(expectedUrl), expectedUrl, { timeout: 5000 });

License

expected-condition-playwright is MIT licensed.