This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
Learn the art of testing for device compatibility on real devices
“One website for every screen size” is undoubtedly a nightmare when it comes to testing for mobile browser compatibility. It’s quite challenging to test applications on multiple devices due to various factors like screen size, resolution.
But now we have tools like BrowserStack, AWS Device farm to write test scripts once and run them on multiple devices, which is more efficient and time-saving.
This article will share the steps in automating web applications and design systems for mobile devices by running Selenium Webdriver tests with NodeJS on BrowserStack.
Get to Know BrowserStack
BrowserStack is an on-demand testing platform that allows developers to use browsers, operating systems, and actual mobile devices to test their websites and mobile apps.
With BrowserStack, you can test your web application instantly on a wide range of real iOS and Android devices on the cloud.
Besides, you can run them in parallel by reducing the time and integrate them with your CI/CD pipeline.
Why Component Testing?
Components are the building block of any frontend application. They help build scalable frontends and make the application modular to reuse code across different modules, applications, Microfrontends &, etc.
And, typically these components are unit tested for their correct operation. This is sufficient for most of the cases.
However, if we want to test them on real devices, we can use tools like Browser Stack.
Using Bit for Component Development
When we move into the paradigm of component development, one of the best open-source platforms out there is Bit.
GitHub - teambit/bit: A tool for component-driven application development.
So, let’s assume you have built your application as a collection of modular components. Then, you can view your components collection, rendered in Bit compositions, and unit-test them.
The following example shows a collection of React components (on the left side-menu) built with Bit, where the product-card component is selected.
Note: The above example shows only one composition. If multiple compositions have different configurations set for the component, we can see them under compositions. e.g., One without Image, having additional menu options to “Delete.”
So, with BrowserStack, we can run across all the components and their compositions to test them against various devices.
Let’s look at how to use it in practice.
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.
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.
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.
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.
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 Bit across multiple devices parallelly.
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/product-card@0.0.5/~aspect/preview/#enlear.react-material-design/widgets/product-card@0.0.5?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.”
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;
- 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…!!
Learn More
- Will Bit Replace npm?
- Testing Web Apps for Mobile with Chrome Dev Tools
- How to Perform Mobile Geolocation Testing and Why You Need It
- Build Your Own JavaScript Testing Framework
Automate Component Testing for Mobile Web Apps with BrowserStack was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
Piumi Liyana Gunawardhana | Sciencx (2021-08-02T18:29:45+00:00) Automate Component Testing for Mobile Web Apps with BrowserStack. Retrieved from https://www.scien.cx/2021/08/02/automate-component-testing-for-mobile-web-apps-with-browserstack/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.