Emulation
With WebdriverIO you can emulate Web APIs using the emulate
command to return custom values that help you emulate certain browser behaviors. Note that this requires your application to explicitly use these APIs.
This feature requires WebDriver Bidi support for the browser. While recent versions of Chrome, Edge and Firefox have such support, Safari does not. For updates follow wpt.fyi. Furthermore if you use a cloud vendor for spawning browsers, make sure your vendor also supports WebDriver Bidi.
To enable WebDriver Bidi for your test, make sure to have webSocketUrl: true
set in your capabilities.
Geolocation
Change the browser geolocation to a specific area, e.g.:
await browser.emulate('geolocation', {
latitude: 52.52,
longitude: 13.39,
accuracy: 100
})
await browser.url('https://www.google.com/maps')
await browser.$('aria/Show Your Location').click()
await browser.pause(5000)
console.log(await browser.getUrl()) // outputs: "https://www.google.com/maps/@52.52,13.39,16z?entry=ttu"
This will monkey patch how navigator.geolocation.getCurrentPosition
works and returns the location provided by you.
Color Scheme
Change the default color scheme setup of the browser via:
await browser.emulate('colorScheme', 'light')
await browser.url('https://webdriver.io')
const backgroundColor = await browser.$('nav').getCSSProperty('background-color')
console.log(backgroundColor.parsed.hex) // outputs: "#efefef"
await browser.emulate('colorScheme', 'dark')
await browser.url('https://webdriver.io')
const backgroundColor = await browser.$('nav').getCSSProperty('background-color')
console.log(backgroundColor.parsed.hex) // outputs: "#000000"
This will monkey patch how window.matchMedia
behaves when you query the color scheme via (prefers-color-scheme: dark)
.
User Agent
Change the user agent of the browser to a different string via:
await browser.emulate('userAgent', 'Chrome/1.2.3.4 Safari/537.36')