Cross Browser Testing using WebdriverIO

Cross browser testing is significant in test automation to ensure that the website or web application is working as intended across different browsers that the end-user may use. WebdriverIO is a great tool for cross-browser testing. Let us look into how to run tests in different browsers with WebdriverIO.

How to perform Cross Browser Testing Service using WebdriverIO

In this section, we are going to learn how to perform cross browser testing using WebdriverIO in BrowserStack. BrowserStack provides instant access to 3000+ real browsers and mobile devices. This makes it really easy to run the tests in different browsers and operating systems.

Cross browser testing helps run tests in various browsers to catch the errors that are occurring due to different browser compatibility. BrowserStack makes it easier to run the automation tests in an efficient and quick way. We can integrate BrowserStack with WebdriverIO via the npm package. 

1. Pre-requisites

1. Node.js
2. WebdriverIO

To install WebdriverIO, pass in the below commands from the root of your project. 

npm init wdio

During installation, you’ll be prompted with questions, as shown in the image. 

You can configure the options mentioned above. Please input BrowserStack for the ‘Do you want to add service to your test setup’ option.

To install the BrowserStack service, pass on the below command in the terminal to install it as a dev dependency.

npm install @wdio/browserstack-service --save-dev

Once we install the service, we can see the package in package.json 

2. Sign up to BrowserStack

To execute the cross browser testing, create a free account with BrowserStack and sign in. 

Once you are in, you will be directed to the dashboard page. Each user will be assigned a unique User Name and Access Key. We will be using them in our tests to connect to the BrowserStack server. 

3. Configuration

To configure the BrowserStack access key, set the user and key value in the wdio.config.js file. Also set in browserstackLocal : true to route the connections from your local computer to the BrowserStack cloud.

exports.config = {

 user: process.env.BROWSERSTACK_USERNAME,

 Key: process.env.BROWSERSTACK_ACCESS_KEY,

 services: [

   ['browserstack', { browserstackLocal: true }]

],

}

Writing and executing tests in BrowserStack with WebdriverIO

Let’s write a simple test to execute them in BrowserStack. In the test, we are navigating to https://bstackdemo.com/ and passing in the credentials, and validating the success message.

describe("First Test", async ()=> {

   it("Execute the tests in different browser", async () => {

       await browser.url('https://bstackdemo.com');


       // adding the first product to cart

       const firstProduct = await browser.$("//div[@id='1']//div[@class='shelf-item__buy-btn'][normalize-space()='Add to cart']");

       await firstProduct.click();


       // clicking on the checkout button

       const checkOutButton = await browser.$("//div[@class='buy-btn']");

       await checkOutButton.click();

       await expect(browser).toHaveUrlContaining('checkout');


       // pass the username value

       const username = await browser.$("#username");

       await username.click();

       await browser.$('//*[@id="username"]/div[2]').click();


       // pass the password value

       const password = await browser.$("#password");

       await password.click();

       await browser.$('//*[@id="password"]/div[2]').click();


       // click on the login button

       await browser.$('#login-btn').click();


       // fill the first name

       const firstName = await browser.$('#firstNameInput');

       await firstName.setValue("Test");


       // fill the last name

       const lastName = await browser.$('#lastNameInput');

       await lastName.setValue("User");


       // fill the address

       const address = await browser.$('#addressLine1Input');

       await address.setValue("12, ABC apartment");


       // fill the province

       const province = await browser.$('#provinceInput');

       await province.setValue("TN");


       // fill the postal code

       const postalCode = await browser.$('#postCodeInput');

       await postalCode.setValue("123456");


       // clicking on the sumbit button

       await browser.$('#checkout-shipping-continue').click();

       const confirmationMessage = $('#confirmation-message')

       await expect(confirmationMessage).toHaveText('Your Order has been successfully placed.');   

   });

});

To run the test case, pass the below command.

npm run wdio

Once you run the test cases, WebdriverIO will interact with the BrowserStack cloud and will execute the tests. After the test run, you can see the result in the BrowserStack dashboard. 

Running Tests in Different Browsers

To run the tests in different browsers, you have to configure the browser capabilities in the wdio.config.js file. It is possible to run the tests in different browser configurations with BrowserStack. Under capabilities, pass the browser configuration as an array. We can also define the different browser versions that we indent to run in the capabilities by passing the version name.

capabilities: [

   {     

     browserName: "chrome",

     acceptInsecureCerts: true, 

   },

   {

     browserName: "firefox",

     acceptInsecureCerts: true, 

   },

   {

     browserName: "safari",

     acceptInsecureCerts: true,   

   },

 ],

Once you run the tests in different browsers, you can view the results in the BrowserStack dashboard. Below is the sample test report attached. 

WebdriverIO also gives us the description of running the tests in the terminal. 

When performing cross-browser testing, users often face issues where they cannot test on an older version of the browsers or run multiple instances as it requires more memory and high infrastructure costs.

Browserstack helps you overcome this by providing a real device cloud. It allows testing on a range of browsers and devices like mobile phones, tablets, and smart TV with the most accurate results. You can execute tests on 3000+ desktop browsers such as older and latest versions of IE, Edge, Safari, Chrome, Firefox, etc.

Perform Cross Browser Tests using WebdriverIO