Giter VIP home page Giter VIP logo

elaichenkov / expected-condition-playwright Goto Github PK

View Code? Open in Web Editor NEW
13.0 2.0 1.0 20 KB

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

License: MIT License

TypeScript 100.00%
playwright puppeteer testing test-tools automation

expected-condition-playwright's Introduction

Stand With Ukraine

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

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.

expected-condition-playwright's People

Contributors

elaichenkov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

aaronrmiller

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.