Skip to content

Playwright.md

Latest commit

 

History

History
1809 lines (1204 loc) · 43.6 KB

Playwright.md

File metadata and controls

1809 lines (1204 loc) · 43.6 KB
Raw
permalink /helpers/Playwright
editLink false
sidebar auto
title Playwright

Playwright

Extends Helper

Uses Playwright library to run tests inside:

  • Chromium
  • Firefox
  • Webkit (Safari)

This helper works with a browser out of the box with no additional tools required to install.

Requires playwright package version ^1 to be installed:

npm i playwright@^1 --save

Configuration

This helper should be configured in codecept.json or codecept.conf.js

  • url: base url of website to be tested
  • browser: a browser to test on, either: chromium, firefox, webkit. Default: chromium.
  • show: - show browser window.
  • restart: - restart browser between tests.
  • disableScreenshots: - don't save screenshot on failure.
  • emulate: launch browser in device emulation mode.
  • fullPageScreenshots - make full page screenshots on failure.
  • uniqueScreenshotNames: - option to prevent screenshot override if you have scenarios with the same name in different suites.
  • keepBrowserState: - keep browser state between tests when restart is set to false.
  • keepCookies: - keep cookies between tests when restart is set to false.
  • waitForAction: (optional) how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
  • waitForNavigation: . When to consider navigation succeeded. Possible options: load, domcontentloaded, networkidle. Choose one of those options is possible. See Playwright API.
  • pressKeyDelay: . Delay between key presses in ms. Used when calling Playwrights page.type(...) in fillField/appendField
  • getPageTimeout config option to set maximum navigation time in milliseconds.
  • waitForTimeout: (optional) default wait* timeout in ms. Default: 1000.
  • basicAuth: (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  • windowSize: (optional) default window size. Set a dimension like 640x480.
  • userAgent: (optional) user-agent string.
  • manualStart: - do not start browser before a test, start it manually inside a helper with this.helpers["Playwright"]._startBrowser().
  • chromium: (optional) pass additional chromium options

Example #1: Wait for 0 network connections.

{
   helpers: {
     Playwright : {
       url: "http://localhost",
       restart: false,
       waitForNavigation: "networkidle0",
       waitForAction: 500
     }
   }
}

Example #2: Wait for DOMContentLoaded event

{
   helpers: {
     Playwright : {
       url: "http://localhost",
       restart: false,
       waitForNavigation: "domcontentloaded",
       waitForAction: 500
     }
   }
}

Example #3: Debug in window mode

{
   helpers: {
     Playwright : {
       url: "http://localhost",
       show: true
     }
   }
}

Example #4: Connect to remote browser by specifying websocket endpoint

{
   helpers: {
     Playwright: {
       url: "http://localhost",
       chromium: {
         browserWSEndpoint: "ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a"
       }
     }
   }
}

Example #5: Testing with Chromium extensions

official docs

{
 helpers: {
   Playwright: {
     url: "http://localhost",
     show: true // headless mode not supported for extensions
     chromium: {
       args: [
          `--disable-extensions-except=${pathToExtension}`,
          `--load-extension=${pathToExtension}`
       ]
     }
   }
 }
}

Example #6: Launch tests emulating iPhone 6

const { devices } = require('playwright');

{
 helpers: {
   Playwright: {
     url: "http://localhost",
     emulate: devices['iPhone 6'],
   }
 }
}

Note: When connecting to remote browser show and specific chrome options (e.g. headless or devtools) are ignored.

Access From Helpers

Receive Playwright client from a custom helper by accessing browser for the Browser object or page for the current Page object:

const { browser } = this.helpers.Playwright;
await browser.pages(); // List of pages in the browser

// get current page
const { page } = this.helpers.Playwright;
await page.url(); // Get the url of the current page

const { browserContext } = this.helpers.Playwright;
await browserContext.cookies(); // get current browser context

Methods

Parameters

  • config

_addPopupListener

Add the 'dialog' event listener to a page

Parameters

  • page

_getPageUrl

Gets page URL including hash.

_locate

Get elements by different locator types, including strict locator Should be used in custom helpers:

const elements = await this.helpers['Playwright']._locate({name: 'password'});

Parameters

  • locator

_locateCheckable

Find a checkbox by providing human readable text: NOTE: Assumes the checkable element exists

this.helpers['Playwright']._locateCheckable('I agree with terms and conditions').then // ...

Parameters

  • locator
  • providedContext

_locateClickable

Find a clickable element by providing human readable text:

this.helpers['Playwright']._locateClickable('Next page').then // ...

Parameters

  • locator

_locateFields

Find field elements by providing human readable text:

this.helpers['Playwright']._locateFields('Your email').then // ...

Parameters

  • locator

_setPage

Set current page

Parameters

acceptPopup

Accepts the active JavaScript native popup window, as created by window.alert|window.confirm|window.prompt. Don't confuse popups with modal windows, as created by various libraries.

amAcceptingPopups

Set the automatic popup response to Accept. This must be set before a popup is triggered.

I.amAcceptingPopups();
I.click('#triggerPopup');
I.acceptPopup();

amCancellingPopups

Set the automatic popup response to Cancel/Dismiss. This must be set before a popup is triggered.

I.amCancellingPopups();
I.click('#triggerPopup');
I.cancelPopup();

amOnPage

Opens a web page in a browser. Requires relative or absolute url. If url starts with /, opens a web page of a site defined in url config parameter.

I.amOnPage('/'); // opens main page of website
I.amOnPage('https://github.com'); // opens github
I.amOnPage('/login'); // opens a login page

Parameters

  • url string url path or global url.

appendField

Appends text to a input field or textarea. Field is located by name, label, CSS or XPath

I.appendField('#myTextField', 'appended');

Parameters

  • field (string | object) located by label|name|CSS|XPath|strict locator
  • value string text value to append.

attachFile

Attaches a file to element located by label, name, CSS or XPath Path to file is relative current codecept directory (where codecept.json or codecept.conf.js is located). File will be uploaded to remote system (if tests are running remotely).

I.attachFile('Avatar', 'data/avatar.jpg');
I.attachFile('form input[name=avatar]', 'data/avatar.jpg');

Parameters

  • locator (string | object) field located by label|name|CSS|XPath|strict locator.
  • pathToFile string local file path relative to codecept.json config file.

cancelPopup

Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.

checkOption

Selects a checkbox or radio button. Element is located by label or name or CSS or XPath.

The second parameter is a context (CSS or XPath locator) to narrow the search.

I.checkOption('#agree');
I.checkOption('I Agree to Terms and Conditions');
I.checkOption('agree', '//form');

Parameters

  • field (string | object) checkbox located by label | name | CSS | XPath | strict locator.
  • context (string? | object) (optional, null by default) element located by CSS | XPath | strict locator.

clearCookie

Clears a cookie by name, if none provided clears all cookies.

I.clearCookie();
I.clearCookie('test');

Parameters

  • cookie string? (optional, null by default) cookie name

clearField

Clears a <textarea> or text <input> element's value.

I.clearField('Email');
I.clearField('user[email]');
I.clearField('#email');

Parameters

  • field
  • editable (string | object) field located by label|name|CSS|XPath|strict locator.

click

Perform a click on a link or a button, given by a locator. If a fuzzy locator is given, the page will be searched for a button, link, or image matching the locator string. For buttons, the "value" attribute, "name" attribute, and inner text are searched. For links, the link text is searched. For images, the "alt" attribute and inner text of any parent links are searched.

The second parameter is a context (CSS or XPath locator) to narrow the search.

// simple link
I.click('Logout');
// button of form
I.click('Submit');
// CSS button
I.click('#form input[type=submit]');
// XPath
I.click('//form/*[@type=submit]');
// link in context
I.click('Logout', '#nav');
// using strict locator
I.click({css: 'nav a.login'});

Parameters

  • locator (string | object) clickable link or button located by text, or any element located by CSS|XPath|strict locator.
  • context (string? | object) (optional, null by default) element to search in CSS|XPath|Strict locator.

clickLink

Clicks link and waits for navigation (deprecated)

Parameters

  • locator
  • context

closeCurrentTab

Close current tab and switches to previous.

I.closeCurrentTab();

closeOtherTabs

Close all tabs except for the current one.

I.closeOtherTabs();

dontSee

Opposite to see. Checks that a text is not present on a page. Use context parameter to narrow down the search.

I.dontSee('Login'); // assume we are already logged in.
I.dontSee('Login', '.nav'); // no login inside .nav element

Parameters

  • text string which is not present.
  • context (string | object)? (optional) element located by CSS|XPath|strict locator in which to perfrom search.

dontSeeCheckboxIsChecked

Verifies that the specified checkbox is not checked.

I.dontSeeCheckboxIsChecked('#agree'); // located by ID
I.dontSeeCheckboxIsChecked('I agree to terms'); // located by label
I.dontSeeCheckboxIsChecked('agree'); // located by name

Parameters

  • field (string | object) located by label|name|CSS|XPath|strict locator.

dontSeeCookie

Checks that cookie with given name does not exist.

I.dontSeeCookie('auth'); // no auth cookie

Parameters

dontSeeCurrentUrlEquals

Checks that current url is not equal to provided one. If a relative url provided, a configured url will be prepended to it.

I.dontSeeCurrentUrlEquals('/login'); // relative url are ok
I.dontSeeCurrentUrlEquals('http://mysite.com/login'); // absolute urls are also ok

Parameters

dontSeeElement

Opposite to seeElement. Checks that element is not visible (or in DOM)

I.dontSeeElement('.modal'); // modal is not shown

Parameters

  • locator (string | object) located by CSS|XPath|Strict locator.

dontSeeElementInDOM

Opposite to seeElementInDOM. Checks that element is not on page.

I.dontSeeElementInDOM('.nav'); // checks that element is not on page visible or not

Parameters

  • locator (string | object) located by CSS|XPath|Strict locator.

dontSeeInCurrentUrl

Checks that current url does not contain a provided fragment.

Parameters

dontSeeInField

Checks that value of input field or textarea doesn't equal to given value Opposite to seeInField.

I.dontSeeInField('email', 'user@user.com'); // field by name
I.dontSeeInField({ css: 'form input.email' }, 'user@user.com'); // field by CSS

Parameters

  • field (string | object) located by label|name|CSS|XPath|strict locator.
  • value string value to check.

dontSeeInSource

Checks that the current page does not contains the given string in its raw source code.