(webdriverio): support emulating Web APIs for geolocation, colorScheme, userAgent and onLine

[christian-bromann]

Proposed changes

Some Web APIs can currently not be emulated by the browser which makes testing certain scenarios difficult. With the new Bidi command we can at least allow to emulate these APIs and provide custom responses.

The following scenarios will become possible with this patch:

Emulate Geolocations:

Change the location of your browser:

await browser.emulate('geolocation', {
    latitude: 52.52,
    longitude: 13.39,
    accuracy: 100
})
await browser.url('https://www.google.com/maps')
await browser.pause(5000)
await browser.$('aria/Show Your Location').click()
await browser.pause(4000)
// Google Maps shows a location in Berlin, Germany

Emulate Color Scheme:

Change the default color scheme of the browser:

await browser.emulate('colorScheme', 'light')
await browser.url('https://webdriver.io')
// shows light version of website
await browser.emulate('colorScheme', 'dark')
await browser.url('https://webdriver.io')
// shows dark version of website

Emulate User Agent:

Change the user agent of the browser:

await browser.emulate('userAgent', 'foobar')
await browser.url('https://webdriver.io')
console.log(() => navigator.userAgent) // outputs: "foobar"

Emulate User Agent:

Change the user agent of the browser:

await browser.emulate('onLine', false)
await browser.url('https://webdriver.io')
console.log(() => navigator.onLine) // outputs: false

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist

• I have read the CONTRIBUTING doc
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• I have added proper type definitions for new commands (if appropriate)

Further comments

Missing:

• unit tests
• e2e tests
• documentation

Reviewers: @webdriverio/project-committers

[autotest-web]

Hi @christian-bromann
Can you please help here........

We have set the geolocation using Emulate cmd to China using the latitude and longitude values.
We are testing the .com URL, If it open in the China location, the expected result is to change the '.com' to '.cn'.
We want to access a url with a specific country code
is it possible with Emulate cmd ?

Using below function we are able to set the geolocation but url not changed as per the country code

async setGeolocationwithEmulate(latitude: any, longitude: any, accuracy=100){
const browser = await this.helpers['WebDriver'].browser;
try{
await browser.emulate('geolocation', {
latitude,
longitude,
accuracy,
});
console.log(Geolocation set to ${latitude}, ${longitude});

}
catch (error) {
console.error('Error:', error);
}
}

[christian-bromann]

@autotest-web it is likely that your geolocation is detected based on the IP of your system. In this case it doesn't work. The command can only emulate the response value of the WebAPI call.

[autotest-web]

@autotest-web it is likely that your geolocation is detected based on the IP of your system. In this case it doesn't work. The command can only emulate the response value of the WebAPI call.

is there any way to access a url with a specific country code.

[christian-bromann]

It depends on how your application determines the location of the user.