Skip to content

Latest commit

 

History

History
1701 lines (1258 loc) · 50.1 KB

plugin-web-app.adoc

File metadata and controls

1701 lines (1258 loc) · 50.1 KB
Raw

Web Application Plugin

The plugin provides functionality to interact with Web applications.

Properties

Note
 The properties marked with bold are mandatory.
Property Name Acceptable values Default Description

selenium.grid.platform-name

Valid target platform name

empty

Identifies the operating system for the testing. e.g. Windows

selenium.grid.platform-version

Valid target platform version

empty

Identifies the operating system version for the testing. e.g. 10

partial$selenium-properties.adoc partial$proxy-properties.adoc

screenshot.on-failure.debug-modes

proxy

<empty>

Provides possibility to attach screenshot for failed proxy steps

web.timeouts.page-load

{durations-format-link}

PT1M

Sets the amount of time to wait for a page load to complete before throwing an error.

web.timeouts.async-script

{durations-format-link}

PT1M

Sets the amount of time to wait for an asynchronous script to finish execution before throwing an error.

web.driver.<browser-name>.command-line-arguments

string with arguments

<empty>

The command line (CLI) arguments to use when starting browser.

<browser-name> is one of the browsers supporting CLI arguments:

web-application.sticky-header-size-percentage

header size as a viewport size percent

25

Before the click VIVIDUS scrolls element into the viewport, the property defines top edge indent in viewport percent for the scroll

How to configure user preferences for Chrome browser?

In addition to the command line arguments, user preferences (see the Preferences file in Chrome’s user data directory or open chrome://prefs-internals/ link in Chrome browser for examples) can be customised.

Here is an example how to configure third-party cookies behaviour.

Add the following property to allow all cookies
web.driver.chrome.experimental-options={"prefs": {"profile": {"cookie_controls_mode": 0}}}

The allowed values for the preference from the example are:

  • 0 - allow all cookies;

  • 1 - block third-party cookies;

  • 2 - block third-party cookies in Incognito mode only.

Expressions

Note
 The expression parameters marked with bold are mandatory.

decodeDataUrl

Parses Data URL-s and decodes their data if Base64 encoding is set. The result of the expression depends on the MIME type of Data URL. The result will be a binary data in case of the binary MIME type and it will be a string for the text MIME type.

Warning
 If expression is applied to invalid Data URL the error will be thrown. 
#{decodeDataUrl($dataUrl)}

  • $dataUrl - The Data URL to decode.

Decoding inlined image
When I save `src` attribute value of element located by `id(image)` to scenario variable `image`
When I compare against baseline with name `inlined-image` from image `#{decodeDataUrl(${image})}`
Table 1. Examples of the expressions decoding Data URL
Expression Result

#{decodeDataUrl(data:,value)}

value

#{decodeDataUrl(data:text/plain,value)}

value

#{decodeDataUrl(data:;base64,SGVsbG8sIFdvcmxkIQ==)}

Hello, World!

#{decodeDataUrl(data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==)}

Hello, World!

#{decodeDataUrl(data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==)}

Hello, World!

#{decodeDataUrl(data:image/png;base64,iVBORw…​.)}

Image binary data.

Dynamic variables

Current page URL

The variable provides the URL of the page currently loaded in the browser.

${current-page-url}
Validate redirect in the browser
Given I am on page with URL `https://docs.vividus.dev/`
Then `${current-page-url}` is equal to `https://docs.vividus.dev/vividus/latest/index.html`

Browser window dimension

The set of dynamic variables provides ability to access height and width of the browser window.

Variable name Description

browser-window-height

the height of the browser window

browser-window-width

the width of the browser window
Check the dimension of the browser window
When I change window size to `800x600`
Then `${browser-window-width}` is = `800`
Then `${browser-window-height}` is = `600`

plugins:partial$plugin-web-app-profiles.adoc

partial$locator-header.adoc plugins:partial$plugin-web-app-locators.adoc

Steps

plugins:partial$plugin-web-app-steps.adoc

Close browser

Closes the browser.

When I close browser

Wait for tab and switch

Waits for the tab with desired title and switches to it.

When I wait `$duration` until tab with title that $comparisonRule `$title` appears and switch to it

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I wait `$duration` until window with title that $comparisonRule `$windowTitile` appears and switch to it

  • $duration - The timeout duration to wait for a tab in {durations-format-link} format.

  • $comparisonRule - The tab title comparison rule.

  • $title - The expected tab title.

Wait for tab and switch to it
Given I am on page with URL `https://vividus-test-site-a92k.onrender.com/windows.html`
When I click on element located by `id(timeout)`
When I wait `PT3S` until tab with title that is equal to `Vividus test site` appears and switch to it

Stop page loading

Stops page loading

When I stop page loading
Tip
 Could be useful in combination with Selenium’s page load strategy
Stop page loading.story
When I open URL `https://delayed.vividus.dev` in new tab
When I stop page loading

Configure page load timeout

Sets a custom page load timeout for a part of the story

When I set page load timeout to `$duration`

  • $duration - total duration to wait for page load completion in {durations-format-link} format.

Before loading a heavy page set an increased timeout
Given I am on page with URL `https://example.com/`
When I set page load timeout to `PT20S`
When I open URL `https://example.com/super-heavy-page` in new tab
When I set page load timeout to `PT10S`

Performance metrics

Checks web performance metrics.

Then metric $webPerformanceMetric is $comparisonRule `$duration`
Check page load
Given I am on page with URL `https://example.com`
Then metric PAGE_LOAD_TIME is less than `PT5S`

Scan barcode from context

Scan a barcode from the specified context and save its value to the variable with the specified name. If context not set - takes a screenshot of the entire page. Only the first found barcode will be scanned.

Supported Code Formats

Actions performed at this step:

  • Takes a screenshot of the specified context. If it’s not set - takes a screenshot of the entire page

  • Scans a barcode from the screenshot and save its value to the variable

When I scan barcode from context and save result to $scopes variable `$variableName`

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The name of the variable to save the value of the barcode.

Scan the barcode
When I change context to element located by `xpath(//div[@id='qrCode'])`
When I scan barcode from context and save result to scenario variable `qrCodeLink`
Then `${qrCodeLink}` is equal to `https://www.example.com`

Upload file

Uploads the resource or file via web interface.

When I select element located by `$locator` and upload `$resourceNameOrFilePath`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I select element located `$locator` and upload file `$filePath`

  • $locator - the locator of the web element with input tag and attribute type=file

  • $resourceNameOrFilePath - relative path to the file to be uploaded

Upload file_for_upload.png file
When I select element located by `id(uploadfile)` and upload file `/folder/file_for_upload.png`

Drag and drop steps

This set of steps facilitates the dragging and dropping of elements on a web page.

Drag and drop using mouse

Performs drag-and-drop operation for the specified elements.

When I drag element located by `$draggable` and drop it at $location of element located by `$target`

  • $draggable - The locator to identify the element to be dragged.

  • $location - The target position relative to the target element (TOP, BOTTOM, LEFT, RIGHT, CENTER, LEFT_TOP, RIGHT_TOP, LEFT_BOTTOM, RIGHT_BOTTOM).

  • $target - The locator to identify the target element.

Dragging the image on the page
When I drag element located by `id(item-number)` and drop it at right bottom of element located by `id(item-number)`

Drag and drop simulation

Simulates a drag-and-drop operation for the specified elements, replicating the behavior without actual mouse actions performed.

When I simulate drag of element located by `$draggable` and drop at element located by `$target`

  • $draggable - The locator to identify the element to be dragged.

  • $target - The locator to identify the target element.

Simulation of dragging an image onto the page
When I simulate drag of element located by `id(item-number)` and drop at element located by `id(item-number)`

Check each element has a specific number of children elements

Checks that each element specified by the locator contains an exact number of visible child elements specified by another locator

Then each element with locator `$elementLocator` has `$number` child elements with locator `$childLocator`

  • $elementLocator - The locator to the parent element.

  • $number - The expected number of children elements

  • $childLocator - The locator to the child elements.

Step example
Then each element with locator `id(menu)` has `5` child elements with locator `id(menu-item)`

Check an element CSS property

Checks the context element has the expected CSS property.

The context can be set by the corresponding steps.

Then context element has CSS property `$cssName` with value that $comparisonRule `$cssValue`

  • $cssName - A name of the CSS property.

  • $comparisonRule - CSS property comparison rule.

  • $cssValue - The expected value of the CSS property.

Change context to element and verify it color CSS property value
When I change context to element located by `id(rainbow)`
Then context element has CSS property `color` with value that is equal to `rgba(0, 0, 0, 1)`

Compare sizes of the elements

Check that all elements found on the page by the given locator have the same dimension: width / height.

Note
 Element’s dimension is measured in pixels and means the size that given element occupies on the web-page in a browser. Element size may vary in different browsers, it also depends on screen resolution, page scaling, scripts running on the page. 
Then each element located by `$locator` has same `$dimension`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then each element located `$locator` has same `$dimension`

  • $locator - The locator to find an elements to compare.

  • $dimension - The elements dimension to compare. Possible values: width, height

Check that all menu items have the same size (width and height)
Then each element located `id(context-menu-item)` has same `width`
Then each element located `id(context-menu-item)` has same `height`

Check element width in a percentage

Checks that the context element has an expected width in a percentage (from the style attribute) relative to the page body.

The context can be set by the corresponding steps.

Then context element has width of $widthPercentage%

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then the context has a width of '$widthPercentage'%

  • widthPercentage - An expected element width in a percentage relative to the page body.

Check element width
When I change context to element located by `id(menu)`
Then context element has width of 30%

Check element width in a percentage relative to the parent element

Checks that the context element has an expected width in a percentage (from the style attribute) relative to the parent element

The context can be set by the corresponding steps.

Then context element has width of $widthPercentage% relative to parent element

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then the context element has a width of 'widthPercentage'% relative to the parent element

  • widthPercentage - An expected element width in a percentage.

Check element width
When I change context to element located by `id(menu)`
Then context element has width of 13% relative to parent element

Focus Steps

Focus indicates the act of selecting an element of a graphical user interface. Text entered at the keyboard or pasted from a clipboard is sent to the component which has the focus.

Set focus on the context element

Sets the focus on the context element, if it can be focused. The focused element is the element that will receive keyboard and similar events by default.

When I set focus on context element
Set focus on the element with ID "input-username"
When I change context to element located by `id(input-username)`
When I set focus on context element

Set focus on the element

Sets the focus on the element found by the specified locator, if it can be focused. The focused element is the element that will receive keyboard and similar events by default.

When I set focus on element located by `$locator`

  • $locator - The locator to find an element.

Set focus on the element with ID "input-username"
When I set focus on element located by `id(input-username)`

Check the context element focus state

Checks if the context element is in the provided focus state by comparing the context element and the active element.

Then context element is $focusState

  • $focusState - The state to verify: in focus or not in focus.

Check the context element is in focus and do keyboard input
Then context element is in focus
When I press ENTER on keyboard

Check the element focus state

Checks if the element found by the specified locator is in the provided focus state by comparing the found element and the active element

Then element located by `$locator` is $focusState

  • $locator - The locator to find an element.

  • $focusState - The state to verify: in focus or not in focus.

Check the element with ID "input-username" is in focus and do keyboard input
Then element located by `id(input-username)` is in focus
When I change context to element located by `id(input-username)`
When I press ENTER on keyboard

Dropdown Steps

Validate available options

Validates whether the dropdown located by locator exists and contains the list of the expected options.

Then dropdown located by `$locator` contains options:$options

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then dropdown located `$locator` contains options:$options

  • $locator - The locator used to find a dropdown.

  • $options - examples table describing expected options

Validate dropdown contains a set of colors
Then dropdown located by `id(colors)` contains options:
|state|item |
|false|Red  |
|false|Green|
|true |Blue |
Important
 The item is an option. The state (true or false) specifies whether the item is selected.

Validate the first selected option

Verifies if dropdown located by locator exists and first selected option.

Then dropdown located by `$locator` exists and selected option is `$option`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then dropdown located `$locator` exists and selected option is `$option`

  • $locator - The locator used to find a dropdown.

  • $option - first selected option

Dropdown.story
Then dropdown located by `id(colors)` exists and selected option is `Blue`

Add an option to the mutli-select dropdown

Selects option in multi-select dropdown

Important
 Step will fail if target dropdown is not multi-select 
When I add `$option` to selection in dropdown located by `$locator`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I add `$option` to selection in dropdown located `$locator`

  • $option - option to select

  • $locator - The locator used to find a dropdown.

Dropdown.story
When I add `Two` to selection in dropdown located by `id(numbers)`

Select the option

Selects option in dropdown

Important
 Does not support multi-selection 
When I select `$option` in dropdown located by `$locator`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I select `$option` in dropdown located `$locator`

  • $option - option to select

  • $locator - The locator used to find a dropdown.

Dropdown.story
When I select `Red` in dropdown located by `id(colors)`

Cookie Steps

Validate cookie presence

Validates whether the certain cookie is set.

Then cookie with name `$cookieName` is set

  • $cookieName - The name of the cookie to check presence.

Check the session cookie is present
Then cookie with name `JSESSIONID` is set

Validate cookie absence

Validates whether the certain cookie is not set.

Then cookie with name `$cookieName` is not set

  • $cookieName - The name of the cookie to check absence.

Check the session cookie is not present
Then cookie with name `JSESSIONID` is not set

Set cookies

Adds the cookies provided in the input ExamplesTable. It’s allowed to add the cookies for the current domain only: make sure the web browser is opened at the expected domain. The actions performed by the step:

  • add the cookies;

  • refresh the current page (this action is required to apply the changes in cookies).

When I set all cookies for current domain:$parameters

  • $parameters - The parameters of the cookies to set as ExamplesTable:

    Column Name Description

    cookieName

    the name of the cookie to set

    cookieValue

    the value of the cookie to set

    path

    the path of the cookie to set
Set the cookie for the current domain
When I set all cookies for current domain:
|cookieName   |cookieValue |path |
|cookieAgreed |2           |/    |

Get cookie value

Finds the cookie by the name and saves its value to a variable.

When I save value of cookie with name `$cookieName` to $scopes variable `$variableName`

  • $cookieName - The name of the cookie to save the value.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to save the cookie value.

Get the value of the session cookie
When I save value of cookie with name `JSESSIONID` to scenario variable `session-id`

Get cookie

Finds the cookie by the name and saves all its parameters as JSON to a variable.

When I save cookie with name `$cookieName` as JSON to $scopes variable `$variableName`

  • $cookieName - The name of the cookie to save.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to save the cookie.

Get the session cookie
When I save cookie with name `JSESSIONID` as JSON to scenario variable `session-id`

Remove cookie

Removes the certain cookie from the current domain. The actions performed by the step:

  • remove the certain cookie the from current domain;

  • refresh the current page (this action is required to apply the changes in cookies).

When I remove cookie with name `$cookieName` from current domain

  • $cookieName - The name of the cookie to remove.

Remove the session cookie
When I remove cookie with name `JSESSIONID` from current domain

Remove cookie without apply

Removes the certain cookie from the current domain, but does not apply the changes in cookies. The current page must be refreshed or the navigation must be performed to apply the cookie changes.

When I remove cookie with name `$cookieName` from current domain without applying changes

  • $cookieName - The name of the cookie to remove.

Remove the session cookie
When I remove cookie with name `JSESSIONID` from current domain without applying changes
When I refresh page

Remove all cookies

Removes all cookies from the current domain. The actions performed by the step:

  • remove all cookies from the current domain;

  • refresh the current page (this action is required to apply the changes in cookies).

When I remove all cookies from current domain

Remove all cookies without apply

Removes all cookies from the current domain, but does not apply the changes in cookies. The current page must be refreshed or the navigation must be performed to apply the cookie changes.

When I remove all cookies from current domain without applying changes

Web Storage steps

Get web storage item

Finds the web storage item by the key and saves its value to the variable.

When I save $storageType storage item with key `$key` to $scopes variable `$variableName`

  • $storageType - One of the web storage mechanisms: either local or session.

  • $key - The name of the key to retrieve the value of.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The name of the variable to store the value of the web storage item.

Get the value of the local storage item
When I save local storage item with key `token` to scenario variable `application-token`

Set web storage item

Adds the item with the specified key-value pair to the web storage, or updates that key’s value if it already exists.

When I set $storageType storage item with key `$key` and value `$value`

  • $storageType - One of the web storage mechanisms: either local or session.

  • $key - The name of the key to create/update.

  • $value - The value to give the key that is creating/updating.

Set the session storage item
When I set session storage item with key `token` and value `session-token`

Validate web storage item presence

Validates the web storage item with the specified key exists.

Then $storageType storage item with key `$key` exists

  • $storageType - One of the web storage mechanisms: either local or session.

  • $key - The name of the key to check presence.

Check the session storage item is present
Then session storage item with key `token` exists

Validate web storage item absence

Validates the web storage item with the specified key does not exist.

Then $storageType storage item with key `$key` does not exist

  • $storageType - One of the web storage mechanisms: either local or session.

  • $key - The key of the local storage item to check absence.

Check the local storage item is not present
Then local storage item with key `token` does not exist

Window Steps

Resize the current browser window

Changes the current browser window size to the specified one.

Important
 The specified browser window size should be smaller than the current screen resolution. 
When I change window size to `$targetSize`

  • $targetSize - The desired browser window size in pixels, e.g. 800x600, where the first measure is window width, the last one is window height.

Resize the browser window
Given I am on page with URL `https://example.com/`
When I change window size to `640x320`

Select state in the checkbox

A checkbox is a graphical user interface element. Performs the action with the flag found by the locator. Actions that can be performed (CHECK or UNCHECK)

When I $checkBoxAction checkbox located by `$checkboxLocator`

  • $checkBoxAction - The action to select a state of the checkbox, either CHECK or UNCHECK.

  • $checkboxLocator - The locator used to identify the checkbox.

Check 'Terms & Conditions' checkbox
When I check checkbox located by `checkboxName(terms-and-conditions)`

Video steps

Steps allow to interact with video elements.

Play Video

Starts video playback.

When I play video in video player located by `$locator`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I play video in video player located `$locator`

  • $locator - The locator used to find a video player.

Pause Video

Pauses video playback.

When I pause video in video player located by `$locator`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I pause video in video player located `$locator`

  • $locator - The locator used to find a video player.

Rewind Video

Rewinds video to the desired mark in seconds.

When I rewind time to `$number` seconds in video player located by `$locator`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I rewind time to `$number` seconds in video player located `$locator`

  • $number - time mark in seconds

  • $locator - The locator used to find a video player.

Get info

Saves video player info: duration, currentTime, src, networkState. For more information about the properties see HTML Audio/Video Properties

When I save info from video player located by `$locator` to $scopes variable `$variableName`

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

When I save info from video player located `$locator` to $scopes variable `$variableName`

  • $locator - The locator used to find video player.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to save the info. If the variable name is info, the following variables will be created:

    • ${info.src}- The current source of the audio/video element

    • ${info.duration} - The length of the current audio/video (in seconds)

    • ${info.currentTime} - The current playback position in the audio/video(in seconds)

    • ${info.networkState} - The current network state of the audio/video. For more information see: Network State

Video player verifications
Given I am on page with URL `https://www.youtube.com/watch?v=pYqyVpCV-3c`
When I pause video in video player located `cssSelector(video)`
When I rewind time to `777` seconds in video player located `cssSelector(video)`
When I play video in video player located `cssSelector(video)`
When I save info from video player located `cssSelector(video)` to SCENARIO variable `info`
Then `${info.currentTime}` is > `0`
Then `${info.duration}` is > `1000`
Then `${info.networkState}` is = `2`
Then `${info.src}` matches `.+youtube.+`

Browser Configuration Steps

Set the browser command line arguments

Allows to set command line arguments for browsers. This step works similar to the property:

web.driver.<browser-name>.command-line-arguments

In case both the property and the step are used - arguments from the property will be ignored. The step will take effect for all new browser sessions created in the current story. It will not affect the current sessions.

Popular browsers supporting command line arguments configuration:

Not supported browsers:

  • Safari

When I set browser command line arguments to `$argsString`

  • $argsString - Sequence of command line arguments, separated by space.

Set the browser to use the mocked camera stream
When I set browser command line arguments to `--use-fake-ui-for-media-stream --use-file-for-fake-video-capture=${videoStorage}/${video1}.y4m --use-fake-device-for-media-stream`
Given I am on main application page

Code steps

Execute async JavaScript and save result.

Executes async JavaScript code and saves result into variable.

When I execute async javascript `$jsCode` and save result to $scopes variable `$variableName`

  • $jsCode - Any JavaScript code. In order to save a result return statement should be used.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to save the cookie value.

Validate response
When I execute async javascript `
var callback = arguments[arguments.length - 1];
var xhr = new XMLHttpRequest();
xhr.open('GET', '/resource/data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    callback(xhr.responseText);
  }
};
xhr.send();` and save result to scenario variable `response`
Then `${response}` matcher `.+`

Element wait steps

Wait for element disappearance with timeout

Waits for element disappearance with desired timeout.

Note
 If the element doesn’t exist on the page/context, the step will immediately complete successfully. Checking the element on the page (if needed) should be done in a separate step (e.g. [_wait_for_element_appearance] or Validate elements). 
Then element located by `$locator` disappears in `$timeout`

  • $locator - The locator used to find element.

  • $timeout - The maximum time to wait for the element disappearance in {durations-format-link} format.

Click on the button and waiting for disappearance of the element for 3 seconds
When I click on a button with the name 'Toggle element visibility with delay'
Then element located by 'xpath(//div[@id='delayed'])' disappears in 'PT3S'

Wait for element state

Waits for an element, located by the specified locator in the given search context, to change to the specified state.

Actions performed at this step:

  • finds an element with the specified locator within search context,

  • waits until this element changes to the specified state or timeout is reached.

When I wait until state of element located by `$locator` is $state

  • $locator - The locator used to find element.

  • $state - The expected element state.

Click on the button and wait until the element becomes invisible
When I click on element located by `buttonName(hide)`
When I wait until state of element located by `xpath(//*[text()='Element to hide']):a` is NOT VISIBLE

Wait until element becomes stale

Waits for an element, located by the specified locator in the given search context, to become stale.

When an element becomes stale:

  • the element has been disposed,

  • the element is no longer attached to the DOM.

Actions performed at this step:

  • finds an element with the specified locator within search context,

  • waits until this element becomes stale or timeout is reached.

When I wait until element located by `$locator` is stale

  • $locator - The locator used to find element.

Delete element using button and wait until the element disappears from the page
When I click on element located by `buttonName(Delete from order)`
When I wait until element located by `xpath(//*[text()='Pizza pepperoni']):a` is stale

Wait until element contains text

Waits for an element, located by the specified locator in the given search context, to contain the certain text.

Actions performed at this step:

  • finds an element with the specified locator within search context,

  • waits until the text in this element becomes visible or timeout is reached.

When I wait until element located by `$locator` contains text `$text`

  • $locator - The locator used to find element.

  • $text - The desired text to be present in the element.

Click on the button and wait until the text in specified element becomes visible
When I click on element located by `buttonName(show text)`
When I wait until element located by `id(element-with-text)` contains text `Text to show`

Wait until scroll is finished

Waits for the scroll finish. Useful for the cases when page have very slow scroll and need to synchronize the tests with the scroll.

When I wait until scroll is finished
Scroll the page and check that the element in the visible area
Given I am on page with URL `http://example.com/pageWithSlowScroll.html`
When I click on element located by `id(scrollIt)`
When I wait until scroll is finished
Then page is scrolled to element located by `id(footerElement)`

Script Steps

The Script Steps verify the presence of JavaScript files in the HTML source code of an active page.

Check the presence of script resource

Warning

This step is deprecated and will be removed in VIVIDUS 0.7.0. Please see the replacement pattern below:

Then number of elements found by `xpath(.//script[contains(@src()='<jsFileName>']):a` is equal to `1`

Checks script (an element with the <script> tag) with the specified path (@src attribute) is included on the page.

Then a javascript file with the name '$jsFileName' is included in the source code

  • $jsFileName - The part of the script resource URL from the @src attribute.

Checks if the javascript with the 'script.js' filename exists in the page source code
Then a javascript file with the name 'script.js' is included in the source code.

Check the presence of script code

Warning

This step is deprecated and will be removed in VIVIDUS 0.7.0. Please see the replacement pattern below:

Then number of elements found by `xpath(.//script[text()='<jsText>']):a` is equal to `1`

Checks the page contains a script (an element with the <script> tag) whose content is equal to the specified text.

Then a javascript with the text '$jsText' is included in the source code

  • $jsText - The expected text to be equal to the text of a <script> tag.

Checks if the JavaScript code equals to the expected one
Then a javascript with the text 'document.getElementById("demo-for-script").innerHTML = "Hello JavaScript!";' is included in the source code

Check script contains code

Warning

This step is deprecated and will be removed in VIVIDUS 0.7.0. Please see the replacement pattern below:

Then number of elements found by `xpath(.//script[contains(text(),'<jsTextPart>')]):a` is equal to `1`

Checks the page contains a script (an element with the <script> tag) whose content contains the specified text.

Then a javascript with the textpart '$jsTextPart' is included in the source code

  • $jsTextPart - The expected text to be contained in the text of a <script> tag.

Checks if the JavaScript code contains 'Hello JavaScript'
Then a javascript with the textpart 'Hello JavaScript' is included in the source code

Set Variable Steps

Save HTML table to the variable

This step allows you to save an HTML table from a specified context into a variable.

For more information, see how to work with table variables

Important
 The HTML table must have a header row with <th> tags. 
When I save table to $scopes variable `$variableName`

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to refer to the variable value.

Note
 Before using this step, ensure the context is set to the required table. See the example below.
Save the first table on the page into a variable named 'table'
When I change context to element located `xpath(//table[1])`
When I save table to SCENARIO variable `table`

Save the number of opened tabs

Saves the number of currently opened tabs in the browser to the variable.

When I save number of open tabs to $scopes variable `$variableName`

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The variable name to refer to the variable value.

Save the number of currently opened browser tabs into a variable named 'count'
When I save number of open tabs to SCENARIO variable `count`

Save the CSS property value of the element

Saves the CSS property value of the element located by locator into a variable.

When I save `$cssProperty` CSS property value of element located by `$locator` to $scopes variable `$variableName`

  • $cssProperty - The name of an CSS property.

  • $locator - The locator used to find the element to get the CSS property.

  • $scopes - The comma-separated set of the variables scopes.

  • $variableName - The name of the variable to save the CSS property value.

Save the CSS property value of the table
When I save `padding` CSS property value of element located by `xpath(//table)` to scenario variable `paddingValue`
Then `${paddingValue}` is equal to `5px`

Alert Steps

Perform action in the alert box

Accepts the action in popup alert with matching text by clicking on the "OK" button or dismiss it by clicking "Cancel" button.

Actions performed at this step:

  • Finds the appropriate alert with matching message

  • Performs the corresponding action

When I $alertAction alert with message which $comparisonRule `$message`

  • $alertAction - Action to perform. Possible values: ACCEPT, DISMISS.

  • $comparisonRule - String comparison rule.

  • $message - The text message of the alert.

Accept popup alert with any text message
When I accept alert with message which matches `.*`

Type text in the alert input field

This step allows you to type text into popup alert input field and then accept the alert.

Note
 This step is applicable only for alerts with a single input field. For authorization alerts, basic URL authorization should be used. For example, https://user:pass@domain.com 
When I type text `$text` in alert and accept it

  • $text - The text to be typed into the alert input field.

Type text 'VIVIDUS' into alert and close it by clicking OK button
When I type text `VIVIDUS` in alert and accept it

Wait for alert appearance

Waits for an popup alert appearance on the current page.

When I wait until alert appears
Wait untill an alert appear after click on the button
When I click on element located by `buttonName(Survey)`
When I wait until alert appears
Then an alert is present

Wait for alert disappearance

Waits for an popup alert disappearance from the current page.

When I wait until alert disappears
Wait untill an alert disappear after it is accepted
When I click on element located by `buttonName(Survey)`
Then an alert is present
When I accept alert with message which matches `.*`
When I wait until alert disappears
Then an alert is not present

Verify that an alert is present

Checks that there is popup alert on the page.

Then an alert is present
Check that an alert appears after clicking on the button
When I click on element located by `buttonName(Survey)`
Then an alert is present

Verify that an alert isn’t present

Checks that there is no any {popup-alert}[popup alerts] on the page.

Then an alert is not present
Check that an alert doesn’t appear on the page
Given I am on page with URL `http://example.com`
Then an alert is not present

Verify that no alert displayed during timeout

Checks that no {popup-alert}[popup alerts] displayed during the timeout.

Then alert does not appear in `$timeout`

  • $timeout - Total duration to wait in the {iso-date-format-link} format.

Check that an alert doesn’t appear within 7 seconds after page loaded
Given I am on page with URL `http://example.com`
Then alert does not appear in `PT7S`

Wait for a frame with the specified name and switch to it

Waits for a frame with the specified name to appear and then switches to it.

When I wait until frame with name `$frameName` appears and I switch to it

  • $frameName - The name or ID of the expected frame.

Wait for a frame with cookieFrame name and switch to it
Given I am on page with URL `http://example.com`
When I wait until frame with name `cookieFrame` appears and I switch to it

Wait for specific title of the current page

Waits until the current page title matches the certain title using specified comparison rule.

When I wait until page title $comparisonRule `$pattern`

  • $comparisonRule - String comparison rule.

  • $pattern - The expected title pattern of the current page.

Check that current title ends with "Domain"
Given I am on page with URL `http://example.com`
When I wait until page title matches `.*Domain`

Slider steps

Steps allow to interact with slider (input element with type = "range").

Set value in the slider

Set the specified value in the slider.

When I set value `$value` in slider located by `$locator`

  • $value - The value to set in the slider. In most cases, it is a numeric value in the range of [0, 100].

  • $locator - The locator used to find a slider.

Set the value into the middle of the slider
When I set value `50` in slider located by `id(test_slider)`

Check value of the slider

Check that the actual value in the slider equals to the value provided in the step.

Then value `$value` is selected in slider located by `$locator`

  • $value - The expected value in the slider. In most cases, it is a numeric value in the range of [0, 100].

  • $locator - The locator used to find a slider.

Check that the value is set in the middle of the slider
Then value `50` is selected in slider located by `id(test_slider)`

Mobile Emulation

Emulate mobile device

Emulates mobile device using the provided configuration.

Important
 The step is only supported by Chrome browser. 
When I emulate mobile device with configuration:`$jsonConfiguration`

  • $jsonConfiguration - The JSON containing device metrics to override.

Emulate iPhone 14 Pro Max
When I emulate mobile device with configuration:`{
    "width": 430,
    "height": 932,
    "deviceScaleFactor": 3,
    "mobile": true
}`

Reset mobile device emulation

Resets the mobile device emulation returning the browser to its initial state.

Important
 The step is only supported by Chrome browser.
Important
 The step ignores the web/desktop/chrome/mobile_emulation/phone profile settings when returning the browser to its initial state. 
When I reset mobile device emulation
Resets device metrics to defaults
When I reset mobile device emulation

Tips & Tricks

Validate URL host of the opened page

To validate host component of the current page URL the following statement can be used:

Given I am on page with URL `https://example.com/relative/url/example.html`
Then `#{extractHostFromUrl(${current-page-url})}` is equal to `example.com`

Validate URL path of the opened page

To validate path component of the current page URL the following statement can be used:

Given I am on page with URL `https://example.com/relative/url/example.html`
Then `#{extractPathFromUrl(${current-page-url})}` is equal to `/relative/url/example.html`

Validate URL of the opened page partially

To validate whether current page URL contains some part the following statement can be used:

Given I am on page with URL `https://example.com/relative/url/example.html`
Then `${current-page-url}` matches `.+\/relative\/url.+`

  • ${current-page-url} is the current page URL dynamic variable.

  • .\/relative\/url. is a regular expression to match the expected part of the page URL.