Using BrowserStack for Component Testing

Before setting up BrowserStack, you need to ensure that the relevant libraries are installed before running your Selenium tests with NodeJS. You can install selenium-webdriver globally, using the following command:

# Use npm to install selenium web driver
npm install -g selenium-webdriver

Step 1: Setup an Account

First, you need to sign up for BrowserStack. If you just want to try BrowserStack, I suggest you continue with the free plan. If you already have an account, nothing to hassle around; just sign in.

Screenshot by Author -Sign up page

When you sign up for the first time, you will be redirected to their Quick Start Guide. Otherwise, you will straightly land on your dashboard.

Screenshot by Author -Dashboard

Step 2: Authenticating Tests

Then you need to configure your tests on BrowserStack. In the language selection, I’ll go with NodeJS.

And then, you need to authenticate your tests with BrowserStack. It requires a username and access key, which can be found at the top of your browser window.

Screenshot by Author -Access Key

var USERNAME = "<username>";
var AUTOMATE_KEY = "<access key>";
var browserstackURL = 'https://' + USERNAME + ':' + AUTOMATE_KEY + '@hub-cloud.browserstack.com/wd/hub';

Step 3: Choosing the Devices

After authenticating, you have to define your capabilities. Capabilities (or intended capabilities) are configuration methods that allow you to determine the browser, operating system, or device you want to run the tests on.

For instance, if you want to choose “Android- Samsung Galaxy A10,” you can do it as follows.

var capabilities = {
  'device' : 'Samsung Galaxy A10',
  'realMobile' : 'true',
  'os_version' : '9.0',
  'browserName' : 'Android',
  'name': 'Sample Test-on Android Samsung Galaxy A10', // test name
  'build': 'Test Build', // CI/CD job or build name
  'browserstack.user' : '<username>',
  'browserstack.key' : '<access key>'
}

NOTE: You can go to BrowserStack documentation and then choose the device of your preference. And the tool will automatically generate the configuration code snippets.

Screenshot by Author -Variety of Devices

For this example, I will be choosing few configurations, including;

• iPhone 12 Pro — Safari Browser
• Desktop OSX — Safari Browser
• Desktop Windows10— Chrome, Firefox

Step 4: Testing the components

Below is an illustration of testing a simple product-card component hosted on Bitacross multiple devicesparallelly.

product-card component on Bit.dev

Tip: Make sure to add the driver.quit(), so BrowserStack recognizes that you’re finished with the test, or else the test keeps running, resulting in a timeout.

const webdriver = require(‘selenium-webdriver’);
async function runTestWithCaps (capabilities) {let driver = new webdriver.Builder().usingServer(‘<server.url>')
.withCapabilities(capabilities)
.build();//Navigating to the Component to be tested
await driver.get(“https://vekl9ku.scopes.bit.dev/api/enlear.react-material-design/widgets/[email protected]/~aspect/preview/#enlear.react-material-design/widgets/[email protected]?preview=compositions&BasicProductCard");//clicking on Buy button
await driver.findElement(webdriver.By.xpath(‘//*[@id=”root”]/div/div/div/div/button[1]’)).click();//clicking on Learn More buttonawait driver.findElement(webdriver.By.xpath(‘//*[@id=”root”]/div/div/div/div/button[2]’)).click();await driver.quit();
}//capabilities 
const capabilities1 = {
‘browserName’: ‘chrome’,
‘browser_version’: ‘latest’,
‘os’: ‘Windows’,
‘os_version’: ‘10’,
‘build’: ‘BStack-[NodeJS] Sample Build’,
‘name’: ‘Parallel test 1’
}const capabilities2 = {
‘browserName’: ‘firefox’,
‘browser_version’: ‘latest-beta’,
‘os’: ‘Windows’,
‘os_version’: ‘10’,
‘build’: ‘BStack-[NodeJS] Sample Build’,
‘name’: ‘Parallel test 2’
}const capabilities3 = {
‘device’: ‘iPhone 12 Pro’,
‘browserName’: ‘iPhone’,
‘os_version’: ‘14’,
‘real_mobile’: ‘true’,
‘build’: ‘BStack-[NodeJS] Sample Build’,
‘name’: ‘Parallel test 3’
}const capabilities4 = {
‘browserName’: ‘Safari’,
‘browser_version’: ‘latest’,
‘os’: ‘OS X’,
‘os_version’: ‘Big Sur’,
‘build’: ‘BStack-[NodeJS] Sample Build’,
‘name’: ‘Parallel test 4’
}// The following code invokes the test function 5 times in parallel with separate capabilities as defined above
runTestWithCaps(capabilities1);
runTestWithCaps(capabilities2);
runTestWithCaps(capabilities3);
runTestWithCaps(capabilities4);

Step 5: Creating the Test File and Execution

Now you can save your tests as a .js file, and you’re all set to run your first test with BrowserStack. In the terminal, navigate to the folder where you have saved your test file. Run the following command.

node <testfilename>.js

In your dashboard, you can check whether if your tests are running and, once it is completed, the status will be changed to “COMPLETED.”

Screenshot by Author -While Your Tests RunningAuthor’s work -Browserstack Parallel Test results

BrowserStack provides a video of your test execution, and after your test execution is completed, you can click on the “Session name” and see how the testing went through.

Note: You can view a similar video for mobile devices as well.

Debugging Support

If you scroll- down the dashboard, you can find many debugging tools to detect and resolve bugs in the automated tests as follows;

Screenshot by Author- Debugging Tools

• Text Logs: Text Logs are the test’s detailed record. They must recognize all the steps performed for the faulty step in the test and diagnose errors.
• Visual logs: Visual logs automatically take the screenshots created by your NodeJS script for each Selenium command. Visual logs support debugging the actual step and the page where there was a failure.

Final Thoughts

As I mentioned initially, tools like BrowserStack have opened a new level of testing for mobile devices. Testing on real devices is always more accurate than emulators, and now we have the platforms to carry out these tests.

When it comes to testing components, it’s more of a new use-case for BrowserStack. So far, it has shown to be really effective, where we can guarantee that the component is functioning on different devices, form factors, and browsers.

However, with Bit, BrowserStack brings in an additional level of quality checks, and it is useful for large teams when they share components across each other.

Another main advantage of using BrowserStack is that it allows testing execution in parallel across multiple browser instances. So, for example, If you have 50 test cases to execute and you have 10 instances available, you will reduce the execution runtime of those test cases by 5.

But there are things that you need to be mindful of when you choose such tools as pricing modal, app requirements for location services, etc.

However, if you haven’t tried out BrowserStack or any similar tool for testing your application on a mobile device, I highly encourage you to try out one today.

Thank you for reading…!!