WebdriverIO Assertion library inspired by expect
- waits for expectation to succeed
- detailed error messages
- works in Mocha, Cucumber, Jest, Jasmine
- builtin types for TypeScript and JS autocompletion
npm install expect
(Jasmine and Jest users should skip this step)npm install expect-webdriverio
NOTE: WebdriverIO v5.16.11
or higher is required!
In your wdio.conf.js
beforeSession () { // before hook works as well
require('expect-webdriverio')
},
In your test
const $button = $('button')
expect($button).toBeDisplayed()
See more Examples
See available Matchers
Besides of the expect-webdriverio
matchers you can use builtin Jest's expect assertions or expect/expectAsync for Jasmine.
{
wait: 2000, // ms to wait for expectation to succeed
interval: 100, // interval between attempts
}
Set options like this:
beforeSession () { // before hook works as well
require('expect-webdriverio').setOptions({ wait: 5000 })
},
Every matcher can take several options that allows you to modify the assertion:
Name | Type | Details |
---|---|---|
wait |
number | time in ms to wait for expectation to succeed. Default: 3000 |
interval |
number | interval between attempts. Default: 100 |
message |
string | user message to prepend before assertion error |
This options can be applied in addition to the command options when strings are being asserted.
Name | Type | Details |
---|---|---|
ignoreCase |
boolean | apply toLowerCase to both actual and expected values |
trim |
boolean | apply trim to actual value |
containing |
boolean | expect actual value to contain expected value, otherwise strict equal. |
asString |
boolean | might be helpful to force converting property value to string |
This options can be applied in addition to the command options when numbers are being asserted.
Name | Type | Details |
---|---|---|
eq |
number | equals |
lte |
number | less then equals |
gte |
number | greater than or equals |
Checks if browser is on a specifc page.
browser.url('https://webdriver.io/')
expect(browser).toHaveUrl('https://webdriver.io')
Checks if website has a specific title.
browser.url('https://webdriver.io/')
expect(browser).toHaveTitle('WebdriverIO · Next-gen WebDriver test framework for Node.js')
Calls isDisplayed
on given element.
const elem = $('#someElem')
expect(elem).toBeDisplayed()
Same as toBeDisplayed
.
const elem = $('#someElem')
expect(elem).toBeVisible()
Calls isExisting
on given element.
const elem = $('#someElem')
expect(elem).toExist()
Same as toExist
.
const elem = $('#someElem')
expect(elem).toBePresent()
Same as toExist
.
const elem = $('#someElem')
expect(elem).toBeExisting()
Checks if element has focus. This assertion only works in a web context.
const elem = $('#someElem')
expect(elem).toBeFocused()
Checks if an element has a certain attribute with a specific value.
const myInput = $('input')
expect(myInput).toHaveAttribute('class', 'form-control')
Same as toHaveAttribute
.
const myInput = $('input')
expect(myInput).toHaveAttr('class', 'form-control')
Checks if an element has a certain attribute that contains a value.
const myInput = $('input')
expect(myInput).toHaveAttributeContaining('class', 'form')
Same as toHaveAttributeContaining
.
const myInput = $('input')
expect(myInput).toHaveAttrContaining('class', 'form')
Checks if an element has a certain class name.
const myInput = $('input')
expect(myInput).toHaveClass('form-control', { message: 'Not a form control!', })
Checks if an element has a certain class name that contains provided value.
const myInput = $('input')
expect(myInput).toHaveClassContaining('form')
Checks if an element has a certain property.
const elem = $('#elem')
expect(elem).toHaveProperty('height', 23)
expect(elem).not.toHaveProperty('height', 0)
Checks if an input element has a certain value.
const myInput = $('input')
expect(myInput).toHaveValue('user', { ignoreCase: true })
Checks if an input element contains a certain value.
const myInput = $('input')
expect(myInput).toHaveValueContaining('us')
Checks if an element can be clicked by calling isClickable
on the element.
const elem = $('#elem')
expect(elem).toBeClickable()
Checks if an element is disabled by calling isEnabled
on the element.
const elem = $('#elem')
expect(elem).toBeDisabled()
// same as
expect(elem).not.toBeEnabled()
Checks if an element is enabled by calling isEnabled
on the element.
const elem = $('#elem')
expect(elem).toBeEnabled()
// same as
expect(elem).not.toBeDisabled()
Checks if an element is enabled by calling isSelected
on the element.
const elem = $('#elem')
expect(elem).toBeSelected()
Same as toBeSelected
.
const elem = $('#elem')
expect(elem).toBeChecked()
Checks if link element has a specifc link target.
const link = $('a')
expect(link).toHaveHref('https://webdriver.io')
Same as toHaveHref
.
const link = $('a')
expect(link).toHaveLink('https://webdriver.io')
Checks if link element contains a specifc link target.
const link = $('a')
expect(link).toHaveHrefContaining('webdriver.io')
Same as toHaveHrefContaining
.
const link = $('a')
expect(link).toHaveLinkContaining('webdriver.io')
Checks if element has a specific id
attribute.
const elem = $('#elem')
expect(elem).toHaveId('elem')
Checks if element has a specific text.
browser.url('https://webdriver.io/')
const elem = $('.tagline')
expect(elem).toHaveText('Next-gen WebDriver test framework for Node.js')
Checks if element contains a specific text.
browser.url('https://webdriver.io/')
const elem = $('.tagline')
expect(elem).toHaveTextContaining('WebDriver test framework')
Checks if an element is within the viewport by calling isDisplayedInViewport
on the element.
const elem = $('#elem')
expect(elem).toBeDisplayedInViewport()
Same as toBeDisplayedInViewport
.
const elem = $('#elem')
expect(elem).toBeVisibleInViewport()
Checks amount of fetched elements using $$
command.
const elems = $$('div')
expect(elems).toHaveChildren({ gte: 10 })
// same as
assert.ok(elems.length >= 10)
Same as toHaveChildren
.
const elems = $$('div')
expect(elems).toBeElementsArrayOfSize({ gte: 10 })
// same as
assert.ok(elems.length >= 10)
Error messages are informative out of the box and contain:
- full element selector, like
$('form').$('input')
- actual and expected values
- highlight the difference (texts assertions)
First of all, feel free to raise an issue with your suggestions or help with PR!
- css matcher
- size matcher
- cookie / localStorage matchers?
- text regex matchers
- multiremote support (if requested)