Skip to main content
Version: 2x

@qavajs/steps-playwright

Step library to work with playwright using DSL page object

Demo projects:

Installation​

npm install @qavajs/steps-playwright

Configuration​

Playwright steps provide a couple of additional configuration properties

NameTypeDescriptionDefault
browserobjectobject describing playwright config (driver can be used as alias){}
pageObjectobjectinstance of page object definitions (page object){}
import App from './page_object';

export default {
require: [
'node_modules/@qavajs/steps-playwright/index.js'
],
browser: {
timeout: {
action: 10000, // playwright action timeout
present: 10000,
visible: 20000,
page: 10000,
networkIdle: 500, // network inactivity period for 'I wait for network idle' step
value: 5000, // expect value timeout
valueInterval: 500, // expect value interval
actionInterval: 1000, // interval to repeat action for 'I click ... until ...' steps
pageRefreshInterval: 2000 // refresh page for 'I refresh page...' steps
},
capabilities: {
browserName: 'chromium'
}
},
pageObject: new App()
}

Connect to playwright server​

To connect to playwright server, pass wsEndpoint property in the capabilities object

export default {
browser: {
capabilities: {
browserName: 'chromium',
wsEndpoint: 'ws://127.0.0.1:60291/2bd48ce272de2b543e4c8c533f664b83'
}
},
}

Connect to cdp endpoint​

To connect to the CDP endpoint, pass cdpEndpoint property in the capabilities object

export default {
browser: {
capabilities: {
browserName: 'chromium',
cdpEndpoint: 'http://localhost:9222/'
}
}
}

Screenshot​

@qavajs/steps-playwright can also take a screenshot on a particular event.

  • onFail
  • beforeStep
  • afterStep
export default {
browser: {
screenshot: {
event: ['onFail'], //event to take a screenshot
fullPage: true // option to take full page screenshot (default false)
}
}
}

Traces​

@qavajs supports capturing playwright traces. https://playwright.dev/docs/next/trace-viewer-intro

Supported events:

  • onFail
  • afterScenario
export default {
//...
browser: {
trace: {
event: ['onFail'], // Events to save trace. Possible value onFail or afterScenario
dir: 'dirToStoreTraces', // Dir to store traces. Default - traces/
attach: true, // Whether trace needs to be attached to the cucumber report. Default - false
screenshots: true, // Whether to capture screenshots during tracing. Screenshots are used to build a timeline preview. Default - true
snapshots: true, // Whether to capture DOM and network activity
}
}
}

Video​

@qavajs supports video recording https://playwright.dev/docs/next/videos

Supported events:

  • onFail
  • afterScenario
export default {
//...
browser: {
video: {
event: ['onFail'], // Events to save video. Possible value onFail or afterScenario
dir: 'video', // Dir to store video. Default is video/
size: {width: 640, height: 480}, // Video resolution
attach: true // Define if video need to be attached to cucumber report. Default false
}
}
}

Reuse Session​

reuseSession flag allows to share driver session between tests. Browser will not be closed automatically after test.

export default {
browser: {
reuseSession: true
}
}

Restart Browser​

restartBrowser flag allows to restart browser between tests instead of default restarting context

export default {
browser: {
restartBrowser: true
}
}

Typed Config​

IQavajsPlaywrightConfig type describes all supported options

import type { IQavajsConfig } from '@qavajs/core';
import type { IQavajsPlaywrightConfig } from '@qavajs/steps-playwright';

const config: IQavajsConfig & IQavajsPlaywrightConfig = {
browser: {
capabilities: {
browserName: 'chromium'
}
}
};

export default config;

Resolved config (with default values applied) is available in custom steps as this.config.driverConfig

When('I do something', async function () {
const timeout = this.config.driverConfig.timeout.visible;
});

Parameter Types​

playwrightLocator​

Resolves to playwright locator

playwrightCondition​

condition of element to wait (can be negated with not)

  • to be visible
  • to be present
  • to be invisible
  • to be enabled
  • to be disabled
  • to be clickable (visible and enabled)
  • to be in viewport
  • to be fully in viewport

Condition can be checked softly (to be softly visible)

playwrightTimeout​

optional timeout that can be passed to wait steps (timeout: x), where x timeout in milliseconds

playwrightMouseButton​

mouse button to interact

  • left
  • right
  • middle

playwrightBrowserButton​

browser navigation button

  • back
  • forward

Context properties​

@qavajs/steps-playwright exposes following world variables

variabletypedescription
this.playwright.browserBrowser | ElectronApplicationbrowser instance
this.playwright.driverBrowser | ElectronApplicationbrowser instance (alias for browser)
this.playwright.contextBrowserContextcurrent browser context
this.playwright.pagePagecurrent context page

Action Steps​

I open {string} url​

Opens provided url

paramtypedescription
urlstringurl to navigate
When I open 'https://google.com' url

I type {string} (in)to {string}​

Type text to element

paramtypedescription
aliasstringelement to type
valuestringvalue to type
When I type 'wikipedia' to 'Google Input'
When I type 'wikipedia' into 'Google Input'

I type {string} chars (in)to {string}​

Type text to element sending fine-grained keyboard events

paramtypedescription
aliasstringelement to type
valuestringvalue to type
When I type 'wikipedia' chars to 'Google Input'
When I type 'wikipedia' chars into 'Google Input'

I click {string}​

Click element

paramtypedescription
aliasstringelement to click
When I click 'Google Button'

I right click {string}​

Right click element

paramtypedescription
aliasstringelement to click
When I right click 'Google Button'

I double click {string}​

Double click element

paramtypedescription
aliasstringelement to click
When I double click 'Google Button'

I tap {string}​

Tap element

paramtypedescription
aliasstringelement to tap
When I tap 'Google Button'

I clear {string}​

Clear element

paramtypedescription
aliasstringelement to clear
When I clear 'Search Input'

I click {string} text in {string} collection​

Click on element with desired text in collection

paramtypedescription
expectedTextstringtext to click
aliasstringcollection
When I click 'google' text in 'Search Engines' collection

I switch to {int} window​

Switch to window by index

paramtypedescription
indexnumberwindow index to switch
When I switch to 2 window

I switch to {string} window​

Switch to window by matcher

paramtypedescription
matcherstringwindow matcher (url or title)
When I switch to 'google.com' window

I open new tab​

Open new browser tab

When I open new tab

I close current tab​

Close current browser tab

When I close current tab

I refresh page​

Refresh page

When I refresh page

I press {string} key(s)​

Press key

paramtypedescription
keystringkey to press
When I press 'Enter' key
When I press 'Control+C' keys

I press {string} key(s) {int} time(s)​

Press button given number of times

paramtypedescription
keystringkey to press
numbernumbernumber of times
When I press 'Enter' key 5 times
When I press 'Control+V' keys 5 times

I hover over {string}​

Hover over element

paramtypedescription
aliasstringelement to hover over
When I hover over 'Google Button'

I select {string} option from {string} dropdown​

Select option with certain text from select element

paramtypedescription
optionstringoption to select
aliasstringalias of select
When I select '1900' option from 'Registration Form > Date Of Birth'
When I select '$dateOfBirth' option from 'Registration Form > Date Of Birth' dropdown

I select {int}(st|nd|rd|th) option from {string} dropdown​

Select option with certain index from select element

paramtypedescription
optionIndexnumberindex of option to select
aliasstringalias of select
When I select 1 option from 'Registration Form > Date Of Birth' dropdown

I will wait for alert/dialog​

Start listening for dialog

When I will wait for dialog

I accept alert/dialog​

Accepts an alert (requires I will wait for alert/dialog step to be called before)

When I will wait for alert
When I accept alert

I dismiss alert/dialog​

Dismisses an alert (requires I will wait for alert/dialog step to be called before)

When I will wait for alert
When I dismiss alert

I type {string} to alert/dialog​

Type a text to alert (requires I will wait for alert/dialog step to be called before)

paramtypedescription
valuestringvalue to type
When I will wait for alert
When I type 'coffee' to alert

I upload {string} file to {string}​

Provide file url to upload input

paramtypedescription
aliasstringelement to upload file
valuestringfile path
When I upload '/folder/file.txt' file to 'File Input'

I scroll by {string}​

Scroll by offset

paramtypedescription
offsetstringoffset string in 'x, y' format
When I scroll by '0, 100'

I scroll to {string}​

Scroll to element

paramtypedescription
aliasstringalias of element
When I scroll to 'Element'

I scroll by {string} in {string}​

Scroll by offset in element

paramtypedescription
offsetstringoffset string in 'x, y' format
aliasstringalias of element
When I scroll by '0, 100' in 'Overflow Container'

I scroll until {string} to be visible​

Scroll page by mouse wheel until element becomes visible

paramtypedescription
aliasstringtarget element
When I scroll until 'Row 99' to be visible

I scroll in {string} until {string} to be visible​

Scroll in container by mouse wheel until element becomes visible

paramtypedescription
scrollstringscroll container
targetstringtarget element
When I scroll in 'List' until 'Row 99' to be visible

I drag and drop {string} to {string}​

Drag&Drop one element to another

paramtypedescription
elementAliasstringelement to drop
targetAliasstringtarget
When I drag and drop 'Bishop' to 'E4'

I define {string} as {string} locator​

Register selector as page object

paramtypedescription
selectorKeystringselector to register
aliasKeystringalias of element
When I define '#someId' as 'My Button' locator
And I click 'My Button'
When I define 'li.selected' as 'Selected Items' locator
And I expect number of element in 'Selected Items' collection to equal '3'

I press {playwrightMouseButton} mouse button​

Press mouse button

paramtypedescription
buttonstringbutton to press (left, right, middle)
When I press left mouse button

I release {playwrightMouseButton} mouse button​

Release mouse button

paramtypedescription
buttonstringbutton to release (left, right, middle)
When I release left mouse button

I move mouse to {string}​

Move mouse to coordinates

paramtypedescription
coordinatesstringx, y coordinates to move
When I move mouse to '10, 15'

I scroll mouse wheel by {string}​

Scroll mouse wheel by x, y offset

paramtypedescription
coordinatesstringx, y offset to scroll
When I scroll mouse wheel by '0, 15'

I hold down {string} key​

Press and hold keyboard key

paramtypedescription
keystringkey to press
When I hold down 'Q' key

I release {string} key​

Release keyboard key

paramtypedescription
keystringkey to release
When I release 'Q' key

I click {playwrightBrowserButton} button​

Click browser button

paramtypedescription
buttonstringbrowser button (back, forward)
When I click back button
When I click forward button

I upload {string} file by clicking {string}​

Provide file url to file chooser

paramtypedescription
filestringfile path or file handle
aliasstringelement that invokes file chooser
When I upload '/folder/file.txt' file by clicking 'Upload Button'

I upload files by clicking {string}:​

Provide multiple file urls to file chooser

paramtypedescription
aliasstringelement that invokes file chooser
filesDataTablefile paths
When I upload files by clicking 'File Input':
| $uploadFile |
| $uploadFile2 |

I set window size {string}​

Resize browser viewport

paramtypedescription
viewportSizestringwidth and height in pixels separated by comma
When I set window size '1440,900'

I click {string} coordinates in {string}​

Click a certain coordinate of an element

paramtypedescription
coordinatesstringcomma separated x and y coordinates
aliasstringelement to click
When I click '0,20' coordinates in 'Google Button'

I grant {string} permission​

Provides permission for the browser context.
Full list of permissions can be found in Playwright documentation.

paramtypedescription
aliasstringpermission name or alias
When I grant 'geolocation' permission

I revoke browser permissions​

Clears all permission overrides for the browser context.

When I revoke browser permissions

I set {string} geolocation​

Sets a geolocation for a current context.
Geolocation param should conform to a JavaScript object { latitude: number, longitude: number}

paramtypedescription
geolocationAliasstringmemory alias of geolocation object
When I set '$sweden' geolocation
When I set '$js({ latitude: 62.39, longitude: -96.81})' geolocation

I save file to {string} by clicking {string}​

Save file to a certain directory.

paramtypedescription
pathstringfile path
aliasstringelement that invokes downloading
When I save file to '/folder/file.txt' by clicking 'Download Button'

I force click {string}​

Force click element

paramtypedescription
aliasstringelement to click
When I force click 'Google Button'

Validation Steps​


I expect {string} {playwrightCondition}​

Verify that element satisfies certain condition

paramtypedescriptionexample
aliasstringelement to check conditionSearch Input
conditionWaitstringfunction to wait conditionto be visible, not to be present
Then I expect 'Header' to be visible
Then I expect 'Loading' not to be present

I expect number of elements in {string} collection {validation} {string}​

Verify that number of element in collection satisfies condition

paramtypedescriptionexample
collectionstringcollection to check conditionSearch Results
validationstringfunction to verify conditionto be equal, to be above, to be below
expectedValuestringexpected value
Then I expect number of elements in 'Search Results' collection to be equal '50'
Then I expect number of elements in 'Search Results' collection to be above '49'
Then I expect number of elements in 'Search Results' collection to be below '51'

I expect text of {string} {validation} {string}​

Verify that text of element satisfies condition

paramtypedescriptionexample
aliasstringelement to check conditionLabel, Search Result (1) > Title
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect text of 'Search Result (1)' to be equal 'google'
Then I expect text of 'Search Result (1)' to be equal '$firstResult'

I expect value of {string} {validation} {string}​

Verify that value of element satisfies condition

paramtypedescriptionexample
aliasstringelement to check conditionInput, Text Area
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect value of 'Input' to be equal 'google'
Then I expect value of 'Textarea (1)' to be equal '$firstResult'

I expect {string} property of {string} {validation} {string}​

Verify that property of element satisfies condition

paramtypedescriptionexample
propertystringproperty check conditionvalue, href, checked, innerHTML
aliasstringelement to check conditionLabel, Search Result (1) > Title
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect 'value' property of 'Search Input' to be equal 'text'
Then I expect 'innerHTML' property of 'Label' to contain '<b>'
Then I expect 'value' property of 'Search Input' to be equal '$inputText'

I expect {string} attribute of {string} {validation} {string}​

Verify that attribute of element satisfies condition

paramtypedescriptionexample
attributestringattribute check conditionhref, checked
aliasstringelement to check conditionLabel, Search Result (1) > Title
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect 'href' attribute of 'Home Link' to contain '/home'
Then I expect 'href' attribute of 'Home Link' to be equal '$url'

I expect {string} custom property of {string} {validation} {string}​

Verify that custom property (script result) of element satisfies condition

paramtypedescriptionexample
propertystringget property script (function reference)$js(element => e.shadowRoot.textContent), $shadowRoot
aliasstringelement to check conditionLabel, Search Result (1) > Title
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect '$js(element => e.shadowRoot.textContent)' custom property of 'Search Input' to equal 'text'
Then I expect '$shadowRoot' custom property of 'Label' to contain 'text'

I expect current url {validation} {string}​

Verify that current url satisfies condition

paramtypedescriptionexample
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect current url contains 'wikipedia'
Then I expect current url equals 'https://wikipedia.org'

I expect page title {validation} {string}​

Verify that page title satisfies condition

paramtypedescriptionexample
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect page title equals 'Wikipedia'

I expect every element in {string} collection {playwrightCondition}​

Verify that all elements in collection satisfy condition

paramtypedescriptionexample
aliasstringalias of collectionSearch Results
conditionstringcondition to waitto be visible, to be present
Then I expect every element in 'Header > Links' collection to be visible
Then I expect every element in 'Loading Bars' collection not to be present

I expect text of every element in {string} collection {validation} {string}​

Verify that all texts in collection satisfy condition

Note: step passes in case of empty collection

paramtypedescriptionexample
aliasstringalias of collectionSearch Results
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect text of every element in 'Search Results' collection equals to 'google'
Then I expect text of every element in 'Search Results' collection does not contain 'google'

I expect {string} attribute of every element in {string} collection {validation} {string}​

Verify that all particular attributes in collection satisfy condition

Note: step passes in case of empty collection

paramtypedescriptionexample
attributestringattribute to gethref, checked
aliasstringalias of collectionSearch Results
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect 'href' attribute of every element in 'Search Results' collection to contain 'google'

I expect {string} property of every element in {string} collection {validation} {string}​

Verify that all particular properties in collection satisfy condition

Note: step passes in case of empty collection

paramtypedescriptionexample
attributestringattribute to gethref, checked
aliasstringalias of collectionSearch Results
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect 'href' property of every element in 'Search Results' collection to contain 'google'

I expect {string} custom property of every element in {string} collection {validation} {string}​

Verify that all custom properties (script results) in collection satisfy condition

Note: step passes in case of empty collection

paramtypedescriptionexample
propertystringget property script (function reference)$js(element => element.nodeName), $shadowRoot
aliasstringalias of collectionSearch Results
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect '$js(element => element.nodeName)' custom property of every element in 'Collection' collection to equal 'LI'

I expect {string} css property of {string} {validation} {string}​

Verify that css property of element satisfies condition

paramtypedescriptionexample
propertystringproperty check conditioncolor, font-size
aliasstringelement to check conditionLabel, Search Result (1) > Title
validationstringvalidation typeto be equal, to contain, not to match
expectedValuestringexpected result
Then I expect 'color' css property of 'Search Input' to be equal 'rgb(42, 42, 42)'
Then I expect 'font-family' css property of 'Label' to contain 'Fira'

I expect {string} css property of every element in {string} collection {validation} {string}​

Verify that css property of every element in collection satisfies condition

paramtypedescriptionexample
propertystringproperty to verifycolor, font
aliasstringcollection to verifyTable > Rows
validationstringfunction to verify conditionto be equal, to be above, to be below
expectedValuestringexpected result
Then I expect 'color' css property of every element in 'Table > Rows' collection to be equal 'rgb(42, 42, 42)'
Then I expect 'font-family' css property of every element in 'Labels' collection to contain 'Fira'

I expect text of alert/dialog {validation} {string}​

Verify that text of an alert meets expectation

paramtypedescriptionexample
validationstringfunction to verify conditionto be equal, to be above, to be below
expectedValuestringexpected result
When I will wait for alert
Then I expect text of alert does not contain 'coffee'
Then I expect text of dialog to equal 'Are you sure you want to leave this page?'

Memory Steps​


I save text of {string} as {string}​

Save text of element to memory

paramtypedescriptionexample
aliasstringelement to get textLabel, Search Result (1) > Title
keystringkey to store value
When I save text of 'Search Result (1)' as 'firstSearchResult'

I save value of {string} as {string}​

Save value of element to memory

paramtypedescriptionexample
aliasstringelement to get valueTextarea, Search Input
keystringkey to store value
When I save value of 'Search Result (1)' as 'firstSearchResult'

I save {string} property of {string} as {string}​

Save property of element to memory

paramtypedescriptionexample
propertystringproperty to storevalue, href, checked, innerHTML
aliasstringelement to get valueLabel, Search Result (1) > Title
keystringkey to store value
When I save 'checked' property of 'Checkbox' as 'checked'
When I save '$prop' property of 'Checkbox' as 'checked'

I save {string} attribute of {string} as {string}​

Save attribute of element to memory

paramtypedescriptionexample
attributestringattribute to storehref, checked
aliasstringelement to get valueLabel, Search Result (1) > Title
keystringkey to store value
When I save 'href' attribute of 'Link' as 'linkHref'
When I save '$prop' attribute of 'Link' as 'linkHref'

I save number of elements in {string} collection as {string}​

Save number of elements in collection to memory

paramtypedescriptionexample
collectionstringcollection to get valueSearch Results
keystringkey to store value
When I save number of elements in 'Search Results' collection as 'numberOfSearchResults'

I save text of every element of {string} collection as {string}​

Save array of texts of collection to memory

paramtypedescriptionexample
aliasstringcollection to get valueSearch Results
keystringkey to store value
When I save text of every element of 'Search Results' collection as 'searchResults'

I save {string} attribute of every element of {string} collection as {string}​

Save array of attributes of collection to memory

paramtypedescriptionexample
attributestringattribute to get valuechecked, href
aliasstringcollection to get valueSearch Results
keystringkey to store value
When I save 'checked' attribute of every element of 'Search > Checkboxes' collection as 'checkboxes'

I save {string} property of every element of {string} collection as {string}​

Save array of properties of collection to memory

paramtypedescriptionexample
propertystringproperty to get valuehref
aliasstringcollection to get valueSearch Results
keystringkey to store value
When I save 'href' property of every element of 'Search Results' collection as 'hrefs'

I save current url as {string}​

Save current url to memory

paramtypedescriptionexample
keystringkey to store value
When I save current url as 'currentUrl'

I save page title as {string}​

Save current page title to memory

paramtypedescriptionexample
keystringkey to store value
When I save page title as 'currentTitle'

I save {string} css property of {string} as {string}​

Save css property of element to memory

paramtypedescriptionexample
propertystringproperty to storebackground-color, font-size
aliasstringelement to get valueLabel, Search Result (1) > Title
keystringkey to store value
When I save 'color' css property of 'Checkbox' as 'checkboxColor'
When I save '$propertyName' property of 'Checkbox' as 'checkboxColor'

I save screenshot as {string}​

Save page screenshot into memory

paramtypedescription
keystringkey to store value
When I save screenshot as 'screenshot'

I save full page screenshot as {string}​

Save full page screenshot into memory

paramtypedescription
keystringkey to store value
When I save full page screenshot as 'screenshot'

I save screenshot of {string} as {string}​

Save element screenshot into memory

paramtypedescription
keystringkey to store value
aliasstringelement to get screenshot
When I save screenshot of 'Element' as 'screenshot'

I save bounding rect of {string} as {string}​

Save bounding client rect to memory https://developer.mozilla.org/en-US/docs/Web/API/DOMRect

paramtypedescription
aliasstringelement to get bounding rect
keystringkey to store value
When I save bounding rect of 'Node' as 'boundingRect'
Then I expect '$boundingRect.width' to equal '42'

I save {string} custom property of {string} as {string}​

Save custom property (script result) of element to memory

paramtypedescriptionexample
propertystringget property script (function reference)$js(element => element.value), $shadowRoot
aliasstringelement to get value fromLabel, Search Result (1) > Title
keystringkey to store value
When I save '$js(element => element.value)' custom property of 'Element' as 'value'

I save {string} custom property of every element of {string} collection as {string}​

Save array of custom properties (script results) of collection to memory

paramtypedescriptionexample
propertystringget property script (function reference)$js(element => element.nodeName), $shadowRoot
aliasstringcollection to get value fromSearch Results
keystringkey to store value
When I save '$js(element => element.nodeName)' custom property of every element of 'Collection' collection as 'nodeNames'

Wait Steps​


I refresh page until {string} {playwrightCondition}( ){playwrightTimeout}​

Refresh page until element matches condition

paramtypedescription
aliasstringelement alias
conditionstringcondition to wait
timeoutnumber (optional)timeout in milliseconds
When I refresh page until 'Internal Server Error Box' to be visible
When I refresh page until 'Submit Button' to be enabled
When I refresh page until 'Place Order Button' to be clickable (timeout: 3000)

I refresh page until text of {string} {validation} {string}( ){playwrightTimeout}​

Refresh page until element text matches condition

paramtypedescription
aliasstringelement alias
conditionstringcondition to wait
expectedstringexpected value
timeoutnumber (optional)timeout in milliseconds
When I refresh page until text of 'Order Status' to be equal 'Processing'
When I refresh page until text of 'Currency' not contain '$'
When I refresh page until text of 'My Salary' to match '/5\d{3,}/' (timeout: 3000)

I click {string} until text of {string} {validation} {string}( ){playwrightTimeout}​

Repeatedly click an element until text of another element matches condition

paramtypedescription
aliasToClickstringelement to click
aliasToCheckstringelement to check
conditionstringcondition to wait
expectedstringexpected value
timeoutnumber (optional)timeout in milliseconds
When I click 'Send Message Button' until text of 'Information Alert' to be equal 'Your account has been banned'
When I click 'Add To Cart Button' until text of 'Shopping Cart Total' to match '/\$5\d{3,}/' (timeout: 3000)

I click {string} until value of {string} {validation} {string}( ){playwrightTimeout}​

Repeatedly click an element until value of another element matches condition

paramtypedescription
aliasToClickstringelement to click
aliasToCheckstringelement to check
conditionstringcondition to wait
expectedstringexpected value
timeoutnumber (optional)timeout in milliseconds
When I click 'Plus Button' until value of 'Quantity Input' to be equal '9'
When I click 'Suggest Button' until value of 'Repository Name Input' to match '/\w{5,}/' (timeout: 30000)

I wait {int} ms​

Wait for specified number of milliseconds

paramtypedescription
msnumbermilliseconds
When I wait 1000 ms

I wait for network idle {playwrightTimeout}​

Wait for absence of network activity during specified period of time (networkIdle timeout by default). Fails if network is not idle within page timeout

paramtypedescription
timeoutnumber (optional)period of network inactivity in milliseconds
When I wait for network idle
When I wait for network idle (timeout: 1000)

Execute Steps​


I execute {string} function/script​

Execute client function

paramtypedescription
functionKeystringfunction memory key to execute
When I execute '$fn' function # fn is function reference
When I execute 'window.scrollBy(0, 100)' function

I execute {string} function/script and save result as {string}​

Execute client function and save result into memory

paramtypedescription
functionKeystringfunction memory key to execute
memoryKeystringmemory key to save value
When I execute '$fn' function and save result as 'result' # fn is function reference
When I execute 'window.scrollY' function and save result as 'scroll'

I execute {string} function/script on {string}​

Execute client function on certain element

paramtypedescription
functionKeystringfunction memory key to execute
aliasstringtarget element alias
When I execute '$fn' function on 'Component > Element' # fn is function reference
When I execute 'arguments[0].scrollIntoView()' function on 'Component > Element'

I execute {string} function/script on {string} and save result as {string}​

Execute client function on certain element

paramtypedescription
functionKeystringfunction memory key to execute
memoryKeystringmemory key to save value
aliasstringtarget element alias
When I execute '$fn' function on 'Component > Element' and save result as 'innerText' # fn is function reference
When I execute 'arguments[0].innerText' function on 'Component > Element' and save result as 'innerText'

Electron Steps​

Electron application can be launched by setting electron as browserName and providing app entry point via args

export default {
browser: {
capabilities: {
browserName: 'electron',
args: ['main.js'],
cwd: 'path/to/electron/app'
}
}
}

I execute {string} function/script on electron app​

Execute function on electron main process

paramtypedescription
functionKeystringfunction memory key to execute
When I execute '$js(async ({ app }) => app.getAppPath())' function on electron app

I execute {string} function/script on electron app and save result as {string}​

Execute function on electron main process and save result into memory

paramtypedescription
functionKeystringfunction memory key to execute
memoryKeystringmemory key to save value
When I execute '$js(async ({ app }) => app.getAppPath())' function on electron app and save result as 'path'

I click {string} electron menu​

Click electron application menu item

paramtypedescription
menustringmenu path separated with >
When I click 'File > Edit' electron menu

Mock Steps​


I create mock for {string} as {string}​

Create mock instance

paramtypedescription
urlTemplatestringminimatch url template to mock
memoryKeystringmemory key to store mock instance
When I create mock for '/yourservice/**' as 'mock1'
When I create mock for '$mockUrlTemplate' as 'mock1'

I set {string} mock to respond {string} with: [multiline]​

Add mocking rule to respond with desired status code and payload

paramtypedescription
mockKeystringmemory key to get mock instance
statusCodestringstatus code
bodystringresponse body
When I create mock for '/yourservice/**' as 'myServiceMock'
And I set '$myServiceMock' mock to respond '200' with:
"""
{
"status": "success"
}
"""

I set {string} mock to respond {string} with {string}​

Add mocking rule to respond with desired status code and payload

paramtypedescription
mockKeystringmemory key to get mock instance
statusCodestringstatus code
bodystringresponse body
When I create mock for '/yourservice/**' as 'myServiceMock'
And I set '$myServiceMock' mock to respond '200' with '$response'

I set {string} mock to abort with {string} reason​

Add mocking rule to abort request with certain reason

paramtypedescription
mockKeystringmemory key to get mock instance
reasonstringreason string see https://playwright.dev/docs/api/class-route#route-abort
When I create mock for '/yourservice/**' as 'myServiceMock'
And I set '$myServiceMock' mock to abort with 'Failed' reason

I restore {string} mock​

Restore mock

paramtypedescription
mockKeystringmemory key to get mock instance
When I restore '$myServiceMock'

I restore all mocks​

Restore all mocks

When I restore all mocks

Set cookie

paramtypedescription
cookiestringcookie name
valuestringvalue to set
When I set 'userID' cookie as 'user1'
When I set 'userID' cookie as '$userIdCookie'

Save cookie value to memory

paramtypedescription
cookiestringcookie name
keystringmemory key
When I save value of 'auth' cookie as 'authCookie'

Local/Session Storage Steps​


I set {string} {word} storage value as {string}​

Set value of local/session storage

paramtypedescription
storageKeystringlocal/session storage key to set value
storageTypewordstorage type (local or session)
valuestringvalue to set
When I set 'username' local storage value as 'user1'
When I set '$sessionStorageKey' session storage value as '$sessionStorageValue'

I save value of {string} {word} storage as {string}​

Set value of local/session storage

paramtypedescription
storageKeystringlocal/session storage key to set value
storageTypewordstorage type (local or session)
keystringmemory key
When I save value of 'username' local storage as 'localStorageValue'
When I save value of '$sessionStorageKey' session storage value as 'sessionStorageValue'

Network Intercept Steps​


I create interception for {string} as {string}​

Create interception for url or predicate function

paramtypedescription
predicatestringurl or predicate function to listen
keystringkey to save interception
When I create interception for '**/api/qavajs' as 'interception'
When I create interception for '$condition' as 'intercept' # where condition is function that wait for particular event https://playwright.dev/docs/network#network-events

I wait for {string} response​

Wait for interception event

paramtypedescription
interceptionstringmemory key of interception event
When I create interception for '**/api/qavajs' as 'interception'
And I wait for '$interception' response

I save {string} response as {string}​

Wait for interception event and save response to memory

paramtypedescription
interceptionstringmemory key of interception event
keystringkey to save interception response
When I create interception for '**/api/qavajs' as 'interception'
And I save '$interception' response as 'response' # response will be instance of Response object https://playwright.dev/docs/api/class-response
And I expect '$response.status()' to equal '200'