DEV Community: Garima Tiwari

How to Inspect or Locate Element using UIAutomatorViewer in Appium: Tutorial

Garima Tiwari — Fri, 22 Apr 2022 19:04:23 +0000

Appium is widely used for automated mobile app testing. It helps execute automated tests on native and hybrid apps for faster results. To fulfill the growing demand for apps that serve, delight, and retain users, the need for automated app testing continues to increase. That is why Appium is widely used to perform automation testing, which helps development and testing professionals deliver high-end apps within tight deadlines.

For any application, User Interface (UI) plays a major role. It is the UI elements that the end-user interacts with. Thus, it is very important to test UI elements individually. These elements can be located using GUI (Graphic User Interface) tools like UIAutomatorViewer, and then tested with desired scenarios involving user interactions.

This article will discuss different ways to inspect or locate UI elements using UIAutomatorViewer in Appium.

Before we begin, let’s look at different ways used to define a UI Element.

Ways of defining a UI Element

UI Elements can be defined by ID, ClassName, Name, Accessibility ID, XPath.

To understand how to inspect or locate a UI element with UIAutomatorViewer, this article will use the example of the Android Calculator. The aim is to locate the element that is the + button with the help of UIAutomator View, and Click on it.

Setting up UIAutomatorViewer

Before creating the script to inspect the desired element, let’s look at setting up UIAutomatorViewer.

Prerequisites for setting up UIAutomatorViewer

Install Appium
Install Android Studio and SDK Tools
Install Java and set up the environment variables
Install Eclipse IDE for Java
Connect the Android device where the test application is to be tested. The system must have Appium Setup using USB

Once the Appium Server is launched

Open UIAutomatorViewer

This can be done by either of the following methods:

entering uiautomatorviewer in the command prompt
opening uiautomatorviewer.bat file in the Android installation folder with the following command: Android >> Android-SDK >> Tools >> UIAutomatorViewer.bat

Locating Element using UIAutomatorViewer

This article will explore a test case demonstrating how to locate the + button on the Android Calculator App using Java and click it.

the UIAutomatorViewer is opened, open the target app that has to be tested – Android Calculator in this example.
Click on the Device Screenshot Icon to display the screen of the Android device in the window. It looks like the screenshot below.

UIAutomatorViewer Window with Android Calculator App

Move the cursor on the target element that has to be located – the + button.
Note down the values mentioned in the Node Detail Tab of the UIAutomatorViewer window.
Note the values of Text, ResourceID, Class, Package, and Content Desc. These values will be used when writing the test script to locate the element.

Script to Identify the + Button in the Android Calculator App

Find the + Button using ID and click it

driver.findElement(By.id("com.android.calculator2:id/plus")).click();

driver.findElementById("com.android.calculator2:id/plus").click();

Find the + Button using Accessibility ID Property and click it

driver.findElementByAccessibilityId("plus").click();

Find the + Button using XPath and click it

driver.findElement(By.xpath("//android.widget.Button[@content-desc = 'plus']")).click();

driver.findElement(By.xpath("//*[@content-desc = 'plus']")).click();

Find the + Button using ClassName **and **findElements() method and click it

List<MobileElement> elements = driver.findElements(By.className("android.widget.Button"));
for(MobileElement element : elements) {
if(element.getAttribute("contentDescription").equals("plus")) {
element.click();
break;
}
}

Conclusion

As demonstrated, inspecting a desired element from the target Android App under test is easy enough using UIAutomatorViewer in Appium. This can be used to test the functionality of UI elements while performing Android App Automation testing.

How to handle Web Tables in Selenium

Garima Tiwari — Wed, 23 Mar 2022 10:45:27 +0000

Selenium is a widely used automation testing tool used to ensure that websites work as expected, in line with predetermined technical and business requirements. Using Selenium helps website developers comply with the growing demands made upon them i.e. faster release of updated and perfectly functioning features, ideally within every few weeks.

Selenium Webdriver, a major component of the Selenium Test Suite is a web framework that runs automated tests on websites to ensure all UI elements are functioning accurately.

Among essential UI elements, web tables are important for sites in which information has to be depicted in a tabular format. These tables could have static data that is fed once or could comprise dynamic data that automatically changes at regular intervals.

The data in the tables is often useful for the overall functionality of the web application. This makes it an important feature, which needs to be tested for accurate functioning using Selenium.

This article will demonstrate the testing of web tables using Selenium Webdriver through an example. However, let’s begin with understanding the types of web tables, and how they work.

What are Web Tables?

Web Tables are like normal tables where the data is presented in a structured form using rows and columns. The only difference is that they are displayed on the web with the help of HTML code.

<table> is the HTML tag that is used to define a web table. While <th> is used for defining the header of the table, <tr> and <td> tags are used for defining rows and columns respectively for the web table.

Example of writing a web table using HTML:

<table>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
 <tr>
  <td>Jill</td>
  <td>Ann</td>
  <td>24</td>
 </tr>
 <tr>
  <td>Eve</td>
  <td>Anderson</td>
  <td>34</td>
 </tr>
</table>

Output: The image shown below depicts how the web table written using code snippet above looks like.

Types of Web Tables

Depending on the data in the table, web tables can be classified as Static web tables and Dynamic web tables.

- Static Web Tables

These tables have fixed data that remains unchanged throughout. Due to the static nature of their content, they are called Static web tables.

- Dynamic Web Tables

These tables have data that changes over time, and hence the number of rows and columns might also change depending upon the data shifts. Due to the dynamic nature of their content, they are called Dynamic web tables.

Often, the functionalities of web applications depend on the data carried by Dynamic web tables, as they act as the data source for the functional modules in many cases. Thus, handling dynamic web tables using Selenium WebDriver is essential for QAs to run test cases that determine website performance.

How to handle web tables in Selenium?

Let’s understand the handling of web tables with the help of an example. The example uses the data presented using web tables on the IPO Filings Data section of the NYSE (New York Stock Exchange) website to demonstrate the process.

Finding XPath Selected Element in Dynamic Web Table

Let’s select an element in the web table and find its XPath. For Chrome, right-click and inspect the given element to find its XPath.

To find the XPath of a UI element in Firefox, right-click on the desired element, go to “Inspect Element” to open the inspector which will help identify its XPath.

Finding the number of rows and columns of Dynamic Web Table in Selenium

Here’s the code snippet to find the total number of rows and columns for the above Dynamic Web Table

//Finding number of Rows
List<WebElement> rowsNumber = driver.findElements(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[1]/td[1]”));
int rowCount = rowsNumber.size();
System.out.println("No of rows in this table : " + rowCount);

Output: No of rows in this table: 8

//Finding number of Columns
List<WebElement> columnsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/thead/tr/th[1]"));

int columnCount = columnsNumber.size();
System.out.println("No of columns in this table : " + columnCount);

Output: No of columns in this table: 9

Finding cell value for specific row & column of Dynamic Web Table in Selenium

Let’s identify the data present in the 6th Row and 6th Column of the given dynamic web table on the IPO Filings Data page of the NYSE website:

WebElement cellAddress = Rowtable.findElement(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[4]/td[3]”));
String value = cellAddress.getText();
System.out.println(“The Cell Value is : “ +value);

Output: The Cell Value is: OLMA

Complete Code for handling web tables in Selenium

Purpose: Identify the number of rows & columns and fetching the cell value for given row and column from the IPO Filing Data web table on the NYSE website using Selenium

//Opening Chrome Browser
package browser;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class BrowserSelection
{
static WebDriver driver;

public static WebDriver usingChrome()
{
System.setProperty("webdriver.chrome.driver", "E:\SeleniumLibs\\chromedriver_win32\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().window().maximize();
return driver;
}
}

//Test to handle dynamic web table using Selenium WebDriver

package dynamicwebtable;

import java.awt.AWTException;
import java.awt.Robot;
import java.awt.event.KeyEvent;
import java.util.List;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

import browser.BrowserSelection;

public class DynamicWebTableTest
{
WebDriver driver;

@BeforeMethod
public void openBrowser()
{

driver = BrowserSelection.usingChrome();
}

@Test
public void tripDetails() throws InterruptedException, AWTException
{

//Modify Wait time as per the Network Ability in the Thread Sleep method

driver.get("https://www.nyse.com/ipo-center/filings");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
Thread.sleep(5000);

//Finding number of Rows

List<WebElement> rowsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[1]/td[1]"));
int rowCount = rowsNumber.size();
System.out.println("No of rows in this table : " + rowCount);

//Finding number of Columns

List<WebElement> columnsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/thead/tr/th[1]"));
int columnCount = columnsNumber.size();
System.out.println("No of columns in this table : " + columnCount);

//Finding cell value at 4th row and 3rd column

WebElement cellAddress = Rowtable.findElement(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[4]/td[3]”));
String value = cellAddress.getText();
System.out.println(“The Cell Value is : “ +value);

driver.quit();
}

}

As demonstrated, handling the dynamic web table on a website is easy enough using Selenium. Run the code, evaluate the results, and start applying the same process to websites with this particular functionality.

To get accurate results and for identifying all the bottlenecks, it is recommended to run Selenium tests on real browsers and devices to ensure testing in real user conditions. Thus, running on cloud Selenium Grid is a great way to achieve best results.

How to test Gaming Apps

Garima Tiwari — Thu, 17 Mar 2022 11:44:55 +0000

With popular gaming consoles like PlayStation, Xbox, Nintendo Switch, along with millions of gaming Apps available on the Play Store and App Store, the Global Gaming market is massive, valued at USD 173.70 Billion as of 2020 and projected to reach USD 314.40 Billion by 2026, with a CAGR of 9.64%. Given the market size and the projected growth estimates, gaming apps have immense business potential, and thus, need to be of high quality to capture the market.

Source: Mordor Intelligence

The Gaming industry is massive and shows no signs of slowing down as the number of global players is steadily increasing at the rate of 5.6% CAGR. As of 2020, there were over 2.5 Billion Mobile Game Players, 1.3 Billion PC Game Players, and 0.8 Billion Console Game Players globally.

Source: Newzoo

While there is a constant growth projected in the gaming market globally, Asia Pacific marks the biggest market of the Gaming Industry with over 1.4 Billion game players. On the other hand, the Middle East and Africa are the emerging markets with the highest projected growth of 8.8% YoY.

Source: Newzoo

Gaming apps are ubiquitous across different platforms such as gaming consoles, personal computers, mobile devices, and tabs. To succeed, these apps must offer cross platform compatibility for a seamless experience across different platforms.

Testing gaming software is essential to ensure that, among other things, a high-quality gaming app can be accessed on multiple platforms to offer rich customer engagement.

This article will discuss how to test gaming apps extensively, cover a wider area of essential features, rich user experience, and verify cross platform compatibility to meet user expectations.

What to test on Gaming Apps

A gaming experience is all about the graphics, sound, and concept of the game meant to hook the gamer. User experience is the central entity in a gaming app, around which the development process takes place. Whether it is graphics, background music, function, or cross platform compatibility, every aspect works around to provide a complete gaming experience. In a typical gaming application, the following are the main features that have to be tested:

User Login
Games require players to login and maintain individual scoreboards, especially when playing in multiplayer mode. Hence, user login and user profile information pages should properly function.
Payment Gateway
In case the game has some paid features, it is important to have a proper payment gateway page setup that is secure and seamless. Hassle-free payment, along with the data security of the payment details are a must for setting up a functional payment gateway.

Other scenarios that should be tested include:

payment cancellation
payment acknowledgment and receipt generation
payment method validations (whether using Credit/Debit Card or Internet Banking)
currency calculation in case of dealing with multiple currencies
integration with third-party payment gateway systems such as Razorpay

Since payment is one of the most sensitive functions of a gaming app, QAs must perform comprehensive testing of various scenarios for optimal performance.

Multiplayer and Single-player Modes
The game should be easy to switch from Single player to Multiplayer mode. Moreover, different players playing together from different devices should be able to connect seamlessly and enjoy a consistent user experience throughout.
Levels of Game
Ascending levels of a game with successful completion of each level is one of the primary functions required in a gaming app. Testing level selection and ascension to the next level are key scenarios a QA must check while testing a gaming app.
Graphics and Sound Effects
The graphics and sound effects make a gaming experience fulfilling and interesting. Having rich graphics and sound effects across all devices is a key concern that a QA must test, in order to prevent disruptive and inconsistent experiences. Hence, it is important that the gaming app has a responsive design that can adjust to different devices.

Types of Testing to perform on Gaming Apps

In Gaming Apps, UI/UX plays a major role in retaining enthusiasts. Hence different tests are essential for an enriched gaming experience.

Tests such as Functional Testing, Regression Testing, Responsive Testing, Performance Testing, UX testing, Cross Browser Compatibility Testing, and Website Speed Tests are essential in this regard.

- Functional Testing

Functional Testing checks whether the gaming app is working as per the predetermined requirements. This means all functions such as Player Login, Game Algorithm, Scorecard, etc. are working as expected. The test cases are designed on the basis of different possible scenarios, which test various functions from the most basic to advanced ones.

Unit Tests, Sanity Tests, Smoke Tests, Regression Tests, Integration Tests, and Usability tests are some of the testing methods that are used as sub-categories of Functional Testing. While Functional Testing is primary and essential for quality assurance of gaming apps, it is highly time-consuming when performed manually. Hence, an efficient alternative is automation testing, where tools such as Appium can be used to test gaming apps, saving time and effort.

Testing Gaming Apps on real device cloud enables QAs to run automated tests on real browsers and devices, providing wider coverage for testing. Testers can build test cases for gaming apps pertaining to real user conditions to avoid any disruptions causing an unpleasant user experience.

- Cross Platform Compatibility Testing

Gaming apps should be accessed by players from different devices and platforms, especially in multiplayer mode, where multiple gamers simultaneously play the game. Despite accessing the app from different platforms, the users expect a seamless gaming experience; hence the gaming app has to be cross platform compatible.

- Website Speed Testing

Bear in mind that there are certain online games that can be played in browsers. These games must load as fast as possible for a continuous and streamlined gaming experience, irrespective of the device-browser combination they are accessed from.

- Performance Testing

Checking the performance of gaming apps on various parameters such as stability, scalability, speed, and responsiveness altogether, under real user conditions, for varying levels of traffic and load is important to build a robust gaming app. BrowserStack’s real device cloud allows QAs to execute performance testing on real devices, browsers, and platforms to ensure optimal performance through rigorous testing.

Testing of gaming apps is necessary to offer an unmatched gaming experience. However, tests must be comprehensive and test scenarios have to be designed to offer maximum coverage.

This article covers general testing scenarios and testing types that should be performed by the QAs. It can be used as a foundation for extensive testing of gaming apps. Further detailed test scenarios can be created as per business requirements to ensure a high-quality gaming app offering a rich user experience.

Why is it important to test Gaming Apps on multiple devices?

With a massive target audience, it is important that the gaming apps are versatile and can offer the same gaming experience on multiple devices to delight the larger user base. Since users have the option to use different devices and switch between them, it is essential that the gaming apps perform consistently on each so that the user can play games on the go.

A seamless gaming experience would mean that despite the different browser-device-platform combinations, the game offers the same experience throughout. This can only be achieved through comprehensive cross-platform testing using real devices.

Cross Browser Testing a Real Gaming App

To showcase how testing works, let us test a real Gaming App, 2048 on URL https://play2048.co/ using BrowserStack Live.

Step1 Enter the website URL of the 2048 Game under test upon opening BrowserStack Live.

Step2 Select the Device-Browser Combination for testing.

Here are some tests conducted on different Browser-Device-Platform Combinations for the Game 2048:

On iPad Pro 12.9 2018 v13.5 on Safari
iPhone 11 Pro Max v13.4 on Safari
OnePlus 6T on Safari
Samsung Galaxy A10 v9.0 on Firefox
Windows10 on Google Chrome
MacOS Big Sur on Opera

Test Result:

On all of the devices, the game worked consistently providing the same gaming experience. Hence, it can be concluded that the game 2048 is cross-browser compatible.

Testing a Real Gaming Mobile App

To showcase how to test mobile gaming apps on real mobile devices, let us test the same game as above – 2048 on Samsung Galaxy S9 v8.0 by downloading the game app from Google Play Store and testing it using BrowserStack App Live. In this case, the actual app is being testing as opposed to the website.

Downloading the 2048 app on the Real Cloud Device: Samsung Galaxy S9 v8.0 from the Google Playstore.

Testing the 2048 Game App on Samsung Galaxy S9 v8.0

Test Result:

The 2048 game application worked exactly the same and provided a consistent gaming experience as it did with the web app on various devices. Hence, it can be concluded that the game 2048 is cross-platform compatible.

Best Practices while Testing a Gaming App

Here are some of the best practices to be followed while testing a Gaming App:

Test Cross Browser Functionality: UI/UX plays a major role in the gaming experience and hence it is essential that the gaming experience remains unaltered as the user switches between browsers. Hence cross browser compatibility is mandatory and should be a priority while testing.
Test on Real Devices: QAs must use real devices instead of emulators and simulators to understand how an app would perform in the world. This would allow them to report issues accordingly for a smooth gaming experience. While testing on real devices might seem costly, using BrowserStack’s real device cloud, it is possible to test on thousands of device-browser combinations in a cost-effective way.
Take Screenshots or record video of tests: Screenshots and Video Recordings help with debugging when a test case fails or displays unexpected behavior. They help identify exactly where in the test script anomalies appeared and caused the test to fail.BrowserStcak’s comprehensive debugging tools allow QAs to take screenshots and record videos of tests for easy bug identification and resolution.

Testing gaming apps are essential for a seamless and engaging gaming experience. While testing the functionality of the gaming apps is important, it is also necessary to ensure cross browser compatibility of the game for a consistent user experience. To demonstrate the cross platform compatibility, the 2048 web and mobile Gaming apps were tested on BrowserStack Live and BrowserStack App Live using Real Device Cloud. As a result, the popular game proved to be consistent in its user experience across all the platforms, devices, and browsers.

Protractor Testing Tutorial: Test Automation with Protractor and Selenium

Garima Tiwari — Fri, 04 Mar 2022 14:03:56 +0000

The growing demand for high-end software on both web and mobile platforms has made businesses seek advanced development and testing methodologies to deliver excellence. Since software applications are made on different platforms using different tech stacks like AngularJS, NodeJS, etc., the test automation suite has to be compatible with them to offer wide coverage. Frameworks like Protractor help in this regard, facilitating end to end testing due to their compatibility with Selenium Webdriver.

When conducted in tandem with Protractor, one can increase the scope of Selenium tests from only web platforms to the Web applications built using AngularJS as well.

Protractor offers third-party integrations that make testing and debugging more efficient through greater test coverage. It’s easy to write scripts and run them on a robust architecture based on RESTful services, making it a good choice to perform automation testing on AngularJS.

What is Protractor?

Protractor is an open-source automation testing framework that is written using NodeJS. It offers combined end to end testing for web applications that are built using AngularJS. It supports both Angular and Non-Angular applications. But because it can be used to test advanced HTML attributes, Protractor is widely preferred for testing AngularJS.

It leverages the power of various technologies such as NodeJS, Selenium Webdriver, Jasmine, Mocha, Cucumber, etc. to offer a strong automation test suite that is capable of performing Cross Browser Testing for web applications.

Protractor Architecture: How does it work?

Protractor is a wrapper around Selenium Webdriver that provides an automation test framework, which simulates user interaction with an Angular web application for a range of browsers and mobile devices.

It provides all features of Selenium WebDriver along with Angular specific features for seamless end to end testing. Protractor uses JSON Wire protocol similar to that of Selenium WebDriver to allow user interaction with the browser.

The whole process comprises three elements:

Test Script
Server
Browser

The Test Script interacts with the browser with the help of the Selenium server, where the commands from the test script are forwarded to one or more browsers (in case of parallel execution using Selenium Grid).

Why use Protractor for Automation Testing?

1. Identifies Web Elements with advanced HTML attributes

For various Angular-based web applications, the web elements using the advanced HTML attributes like ng-controller, ng-repeater, ng-model, etc. cannot be easily tested, hindering the overall functional testing. These HTML attributes cannot be gauged by Selenium as they are not present in the Selenium Locators. Protractor helps in identifying and testing web elements using these attributes. This is why Protractor is used as a wrapper over Selenium WebDriver for automated end to end Testing of Angular-based web applications.

2. Performs End to End Functional Testing

While other testing frameworks offer unit testing for Angular web apps, Protractor allows the tester to perform automated functional testing on Angular web apps using Selenium WebDriver. It allows testing of all layers of the application, which ensures high-quality software that is functionally robust.

3. Performs Cross Browser Testing

Protractor simulates user interactions by automating browsers such as Chrome, Firefox, Edge, IE, Safari, Opera, and Yandex. It does so with the help of the Browser Drivers for Selenium WebDriver like ChromeDriver, GeckoDriver, SafariDriver, etc. This allows wider coverage for Cross Browser Testing.

4. Supports Real Devices on Cloud for a wider coverage

When performing tests on a remote server, Protractor can be used to test Cross Browser Compatibility for a wide range of devices using a Real Device Cloud. BrowserStack’s real device cloud provides access to a fleet of 3000+ desktop browsers and real mobile devices like iPhone, iPad, Galaxy, OnePlus, Pixel, Xiaomi, and Redmi, to name a few.

5. Offers Flexibility by supporting different languages for API bindings

Protractor is compatible with WebDriver API bindings written in different languages such as JavaScript, Java, Python, Ruby, etc., thereby offering flexibility.

6. Supports Asynchronous Test Execution

Protractor supports asynchronous execution, using Callbacks, Promises, and Async/Await to improve performance and make it faster. Thus, comprehensive End to End Testing can be performed on the Angular web apps in a short span of time.

7. Allows Automatic Waiting

Protractor offers testers the feature of Automatic Waiting, where they don’t have to add wait(s) and sleep(s) in the code. It can automatically execute the next step in the test, as soon as the webpage completes the ongoing pending tasks. Thus, waiting for the test and webpage to sync is not required when using Protractor.

How to set up Protractor for Test Automation?

Before exploring how to use Protractor and Selenium WebDriver for automation testing, let’s understand how to set up Protractor. In order to do so, follow the steps mentioned below:

Install NodeJS: To check if the NodeJS and npm are correctly installed, enter the following commands:

$ node -v
$ npm -v

Install Protractor globally using npm, by entering the following command:

npm install -g protractor

This will install protractor (Protractor API) and a default Selenium Server webdriver-manager, which means there is no need to start a standalone server.

To check if Protractor is installed properly and know its version, enter the following command

protractor --version

Update the WebDriver Manager by entering the following command

webdriver-manager update

Start the WebDriver Manager by entering the following command. This would run WebdriverManager in the background and would identify the tests and run them using Protractor. As Protractor is used, the web driver automatically sends the tests to the relevant browsers.

webdriver-manager start

How to write a test using Protractor Framework?

Once the Protractor is set up, in order to perform the test, one needs a spec file and a configuration file. While the spec file is the actual test script, the configuration file specifies the details of the test such as where to find the test files, which browser and framework are to be used for running them along with other configurations. However, if the configuration is not defined in the configuration file, Protractor uses the defaults.

Here’s the scenario to be automated:

Launch Google.com on the browser
Enter the search query “BrowserStack” in the search box
Check whether the title of the resulting page is “BrowserStack – Google Search”

Specs file for the Test

Specs file for this test scenario is saved as ProtractorTestScript.js

describe('Google\'s Search Functionality', function() {
it('can find search results', function() {

browser.driver.get('https://google.com/');
element(by.name('q')).sendKeys('BrowserStack');
element(by.name('btnG')).click();

//title of the launched webpage is expected to be BrowserStack - Google Search

expect(browser.getTitle()).toEqual('BrowserStack - Google Search');
});
});

Config file for the Test

Specs file for this test scenario is saved as conf.js

exports.config = {
framework: 'jasmine',
capabilities: {
browserName: 'chrome',
},
specs: ['ProtractorTestScript.js']
};

The above test will be run in Chrome browser using Jasmine framework, while the local host address remains default (when using remote server, this needs to be specified).

Executing Cross Browser Parallel Testing using Protractor

To run the same test script parallelly on two different browsers i.e. Chrome and Firefox, here is the code for the config file conf.js

exports.config = {
framework: 'jasmine',
specs: ['ProtractorTestScript.js']
multiCapabilities: [{
browserName: 'chrome',
},
{
browserName: 'firefox',
}],
};

The above feature makes Protractor a great choice for performing automated Cross Browser Testing since it saves time and resources.

Running the Test Script

Once the test script is ready, it can be executed by running the following command on the Command Prompt:

protractor conf.js

Upon entering the command above, the Selenium Server will automatically run the test script, for which the following steps occur:

Google.com will be launched (https://google.com/)
BrowserStack is put in the search field and entered
Title of the webpage opened as the search result is fetched and given as output in the console.

Best Practices in Protractor Testing

Use Parallel Testing for Cross Browser Testing on different browsers to save time, resources and ensure Cross Browser Compatibility.
For keeping track of the action performed with each of commands and make debugging easier, use Text and Visual Logs. While Text Logs fulfil the purpose of record keeping, Visual logs create screenshots of each test step, which helps understand application behavior and troubleshoot when the expected outcome is not achieved.
The user can also record test execution in video format to monitor what fails and understand why it failed. This enables precise debugging. Keep in mind that this might also lengthen execution time, hence use it only where the expected outcome is not achieved.
Tests that pass don’t need to be strictly monitored since an increase in run time could slow down operations if a large number of tests have to be executed.
As always, it is important to run the Protractor Selenium tests on real browsers and devices.

Conclusion

Test automation is crucial for testers to keep up with the growing demands of faster delivery and optimal software quality. Running automated tests via Protractor and Selenium allows testers to achieve precisely this for Angular web applications, resulting in the creation of better applications in shorter durations with Parallel Execution.

However, Protractor automation works best when testing websites on a real device cloud. Doing so is the only way to ensure complete accuracy of results. So, always opt for real device testing to comprehensively verify website performance, cross browser compatibility, and the quality of user experience it offers.

How to set Proxy in Firefox using Selenium WebDriver?

Garima Tiwari — Mon, 21 Feb 2022 12:10:30 +0000

Internet bandwidth is an important asset, especially at workplaces where multiple resources use the same network simultaneously. High-speed internet enables work to be completely faster and more efficiently. This is particularly true when working with web applications, where the internet is actively used.

Setting up Proxy Servers makes the system faster by compressing traffic, managing cache data, and frequently visited web pages. This enhances internet speed and decreases page load speed significantly.

The proxy server is an entity between the client and the server. Whenever placing requests, the entire traffic from the server flows to the client via the proxy server. Setting up the proxy server while testing a web application on Selenium WebDriver could be helpful in capturing traffic.

Proxy servers let the user access the URL of the web application for testing, despite the complex topologies of the network. This network at the workplace complies with the strict policies and thus has many restrictions that hinders testing web applications on it.

This could also mock the backend request calls made by the web application under test, which could be useful in the testing process.

While running a Selenium test, it is essential to set the proxy settings of the browser, since the WebDriver launches the browser all over again, every time a test is run. However, each time the browser is launched, the proxy settings reset automatically and need to be reset every time.

This article discusses the various methods by which to manage proxy settings in Selenium WebDriver.

Setting up Firefox Proxy using Selenium

There are three ways of setting up Firefox Proxy using Selenium:

By adding preferred Proxy Server Host and Port details to FirefoxOptions class, that can be later used in the tests.
By setting Firefox Profile using FirefoxProfile class.
By setting up desired capabilities.

1. Using FirefoxOptions Class

The following code sets up Proxy by using Class FirefoxOptions:

import org.openqa.selenium.Proxy;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxOptions;

public class proxyTest {
public static void main(String[] args) {

Proxy proxy = new Proxy();
//Adding the desired host and port for the http, ssl, and ftp Proxy Servers respectively
proxy.setHttpProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setFtpProxy("<HOST:PORT>");
FirefoxOptions options = new FirefoxOptions();
options.setCapability("proxy", proxy);
//Calling new Firefox profile for test
WebDriver driver = new FirefoxDriver(options);
driver.get("https://www.browserstack.com/");
driver.manage().window().maximize();
driver.quit();
}
}

2. Using FirefoxProfile Class

Similar to the previous method, one can also set Firefox Proxy in Selenium using FirefoxProfile Class. Use the code below to do it:

import org.openqa.selenium.Proxy;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxProfile;

public class proxyTest {
public static void main(String[] args) {


Proxy proxy = new Proxy();
//Adding the desired host and port for the http, ssl, and ftp Proxy Servers respectively 
proxy.setHttpProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setFtpProxy("<HOST:PORT>");

FirefoxProfile profile = new FirefoxProfile();
profile.setProxyPreferences(proxy);

//Calling new Firefox profile for test
WebDriver driver = new FirefoxDriver(profile);
driver.get("https://www.browserstack.com/");
driver.manage().window().maximize();
driver.quit();
}
}

3. Using Desired Capabilities

Similarly one can also set Proxy in Firefox using Selenium Webdriver, through its desired capabilities.

import java.io.IOException;
import org.openqa.selenium.Proxy;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.CapabilityType;
import org.openqa.selenium.remote.DesiredCapabilities;

public class proxyTest {
public static void main(String[] args) {

Proxy proxy = new Proxy();
//Adding the desired host and port for the http, ssl, ftp Proxy Servers respectively
proxy.setHttpProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setSslProxy("<HOST:PORT>");
proxy.setFtpProxy("<HOST:PORT>");

DesiredCapabilities dc = new DesiredCapabilities();
dc.setCapability(CapabilityType.PROXY, proxy);

//Calling new Firefox profile for test
WebDriver driver = new FirefoxDriver(dc);
driver.get("https://www.browserstack.com/");
driver.manage().window().maximize();
driver.quit();
}
}

BrowserStack allows its users to set Desired Capabilities through Capabilities Generator as shown below.

The Way Ahead

Testing websites that are on private networks is always a tough job, and it requires setting up of Proxy Server. However, using BrowserStack Local, private websites can be tested on real browsers and devices by manual and automated testing. The latter is accomplished via a Cloud Selenium Grid. The cloud also provides integrations with popular CI/CD tools such as Jira, Jenkins, TeamCity, Travis CI, and much more. Additionally, there are in-built debugging tools that let testers identify and resolve bugs immediately.

By Setting browserstack.local capability to true in the test scripts, you can test localhost websites. Then, put the following code snippet in the test script to set up a proxy, while using BrowserStack Local.

bsLocalArgs.put("proxyHost", "127.0.0.1");
bsLocalArgs.put("proxyPort", "8000");

One can also perform Local Testing of your websites with Network Restrictions using BrowserStack Local.

Selenium with JavaScript : Getting Started with Automation Testing

Garima Tiwari — Thu, 17 Feb 2022 14:00:45 +0000

With the ever-expanding scope of web applications, both in terms of technology and functionality, user expectations have increased manifold. Every few weeks, new features are added to web applications for higher user engagement. In order to test these features and ensure that the UI is working well, automated testing is necessary. For testers across the world, Selenium is the first choice for executing automated tests.

Selenium is an open source automation testing tool that supports a number of scripting languages like C#, Java, Perl, Ruby, JavaScript, etc. Depending on the application to be tested, one can choose the script accordingly.

JavaScript is a popular choices when it comes to scripting, as suggested by the StackOverflow's Annual Survey 2021 that is Loved by 61.51% and Dreaded by 38.49% of the 82,000+ respondents.

Why do developers prefer JavaScript for writing Selenium test scripts?

JavaScript is widely used for developing web applications, as a large fraction of web applications are developed using the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js).

Selenium WebDriver with JavaScript is a favorable combination to perform automated UI testing of applications.
JavaScript offers efficiency with its well built and structured patterns and functions, making the script more compact.
It offers security and is well supported by a large community of developers.
These are open source and free of costs, which helps in decreasing the overall cost of testing.

It is essential to perform an in-depth evaluation of the application under testing before choosing the scripting language for automated testing with Selenium WebDriver.

Getting started with Selenium using JavaScript

Selenium offers great flexibility when it comes to testing. Whether it is platforms like Windows, Linux, Solaris or the browsers like Chrome, Firefox, Edge, IE, or Safari, Selenium allows platform-independent, cross-browser test functionality with no licensing costs.

Here’s how to get started with the Automated UI testing of an application using Selenium WebDriver and JavaScript:

Prerequisites of the Setup Configuration

Node.js (comes bundled with npm, i.e. Node package manager). For those comfortable with using Maven in Java, consider this to be the equivalent package manager for JS.
Any IDE to write the code. The example in this article uses Eclipse.

Step 1: Install Node.js npm

One can download Node.js and npm, then check that it is installed by running the following commands in the terminal.

node -v (to check Node.js is installed)

npm -v (to check npm is installed)

Once the user has installed Node.js, they will get access to the npm, an inbuilt package manager which will be used to install Selenium for JS.

Step 2: Install Selenium WebDriver

One can download Selenium WebDriver, and install it by running the following command in the terminal by using the Node’s built-in package manager (NPM) to get the package.

npm install –save selenium-webdriver

(–save creates a new package. This would be saved to the project’s package.json file.)

From this page, get download links to the actual drivers that Selenium uses to command different browsers.

It is highly recommended to download links to drivers that the tester wants to work with (for example, Chrome and Firefox). Save them in a separate folder in separate directories and then add those folders to the system PATH. Once this is done, Selenium will be able to start the browser that the user tells it to, by using those executables.

Step 3: Install Eclipse

To perform Automation Testing, IDE is a platform that is required to write the test script. Here we use Eclipse. You can download Eclipse, and run the downloaded file.

Step 4: Install Selenium Webdriver and Client language bindings

Selenium WebDriver and client language bindings are important to establish a connection between the WebDriver and the client and perform testing. Here are the links to install the Selenium WebDriver and client language bindings:

Step 5: Creating and running test script using JavaScript and Selenium

Let’s write the first test script using JavaScript. The code will navigate to the Google.com page, and fetch its title on the console using the promise function.

var webdriver = require(‘selenium-webdriver’);

var browser_name = new webdriver.Builder();

withCapabilities(webdriver.Capabilities.firefox()).build();

browser.get(‘http:/www.google.com’);

var promise = browser_name.getTitle();

promise.then(function(title) 

{

console.log(title);

});

browser.quit();

The code sets aside the instance of Selenium WebDriver, and then builds the browser using WebDriver and the Firefox plugin. In the browser, the code opens Google and fetches its title using promise. This title is then sent as output to the console before quitting the browser.

Best Practices for using JavaScript with Selenium WebDriver

Here are some of the best practices to follow while using JavaScript with Selenium for automated testing:

Use the Right Locators: As the Selenium framework is meant to interact with the browser, it is essential to use the right locators for better navigation of the objects with the DOM (Document Object Model).

- Perform Data-Driven Testing:
For accurate results, make sure the testing is data-driven, as it will help to perform functional testing faster.

- Use PageObjects:
To enhance the overall maintenance and reduce redundancy and duplication, use PageObjects. Here the webpages are defined as classes, and the various elements on it are defined as variables, where the user interaction is implemented in the form of methods.

- Choose the right selector order:
Selector Order is important for faster testing. Get the right Selector Order i.e. (XPath < CSS < Links Text < Name < ID) in place for better results. Learn about different locators in selenium.

Selenium WebDriver has made automation testing easier and more efficient than ever. By using JavaScript to create test scripts, it is easy to perform automated UI Testing for applications. This is useful especially when development cycles are short and the features have to be added every few weeks to keep up with the users’ demand.

Selenium is widely recommended due to the flexibility it offers. It supports major platforms like Windows, Linux, etc. and browsers like Chrome, IE, Edge, Firefox, and Safari as well as numerous scripts like Ruby, Perl, C#, Python, Java, JavaScript. With integrations of tools like TestNG Framework, one can get test results for further analysis, and improve the application.

To create an application with the optimal user experience, use cloud based Automation Selenium Testing tools like BrowserStack that offers access to browsers and real devices to test on. Testing on a real device cloud helps offer a seamless cross platform experience.

Jenkins vs Gitlab: Differences

Garima Tiwari — Sat, 12 Feb 2022 09:03:29 +0000

With the growing use of online platforms and the rise in the number of online products/service providers, user expectations are getting higher by the passing day. To keep up with tough online competition and retain customers, releasing advanced features regularly is essential.

This is where the concepts of Continuous Integration (CI) and Continuous Development (CD) come into the software development process. Through CI/CD, the businesses are able to put up their software applications for their audiences’ use and add advanced features from time to time via release cycles.

Jenkins and Gitlab are open source CI/CD servers that enable automation for various stages of software development, testing, and deployment. This article compares these two widely used CI/CD servers. But before they are compared, let’s discuss these servers and how they function individually.

What is Jenkins?

Jenkins is an automation server that is self-contained and open source. It allows the building, testing, and deployment for every release cycle of software. Through its fleet of plugins (over 1700) that seamlessly integrate with most CI/CD tools, Jenkins offers flexibility and covers almost all functional requirements.

Moreover, since Jenkins is written in Java, it is compatible with any system that has Java Runtime Environment (JRE) installed. This makes Jenkins widely usable due to its easy availability.

Jenkins is one of the most popular CI/CD automation servers in existence due to the following features:

- Easy Installation

It is self-contained and offers complete installation packages for various operating systems such as Windows, Mac OS X, and Unix-based systems. To install Jenkins, all one needs is JRE installed in the system.

- Easy Configuration

Configuring Jenkins is easy as it can be set up through its web interface. The web interface is very user-friendly, and configuration becomes easier with the built-in help offered by Jenkins.

- Open Source

Jenkins is open source, so one can save on the hefty cost of license fees.

- Distribution

Jenkins allows its users to distribute the workload across various machines located at different locations. With builds, tests, and deployments placed across multiple platforms, the process becomes faster as the system offers more productivity by working in parallel on different systems. This saves time and reduces the time frame of release cycles.

- Extensible

Jenkins can be used to deliver over a fleet of functionalities due to strong plugin support. One can use Jenkin for projects as simple as those just requiring a CI server to complex projects involving CD.

- Plugins

Jenkins offers comprehensive support for a wide range of plugins, where the user has the flexibility to choose a plugin that fits their business requirements. The massive number of plugins (1700+) are updated from time to time and offer every possible CI/CD functionality.

- Strong Community Support

Jenkins has a strong and vibrant community of technical experts who support others working on Jenkins. This makes it easier to find solutions to possible issues through mutual cooperation and sharing ideas.

What is GitLab?

GitLab is a self-contained platform that supports the DevOps lifecycle through its web-based services. It manages the Git-repository through its Continuous Integration and Deployment pipelines, issue-tracking features, and wiki to store relevant files.

GitLab works on a freemium basis, i.e., it offers both free and paid services. It enables automation of the entire DevOps lifecycle, which involves planning, building, testing, deployment, and monitoring through release cycles.

Stages of DevOps Lifecycle

Source: GitLab Documentation

GitLab enables Concurrent DevOps, which speeds up the development lifecycle. Through its services, GitLab combines Development, Security, and Ops to deliver faster with utmost security. It is written in Ruby, but the tech stack includes Go, Ruby on Rails, and Vue.js.

GitLab has gained a lot of traction in the CI/CD landscape due to the following features:

- Insights

GitLab offers business insights that help manage the business aspects of the product. These insights allow users to keep track of changes implemented in the system and their implications on product performance. However, this feature is only available for paid versions.

- User Role Management

It offers user role compliances to make the process more streamlined and secure. In addition to this, GitLab also provides user statistics that help in resource management and improve project management efficiency.

- Issues Tracking

Tracking and assigning issues is easy with Gitlab through Task Lists, Thread Discussions, Labels, Milestones, Importing of issues from JIRA, and many more features, that allows effective resolution of issues through proactive, effortless tracking.

- Merge Management

Collaborating and Version Control become seamless with GitLab due to easily implemented code merge requests and merge management systems done upon code review of branches.

- Plugins

GitLab is well supported by several plugins that help make the different stages of DevOps a lot more efficient. These plugins can be used depending upon business requirements.

- Support

GitLab offers Service Level Agreements (SLAs) and 24×5 Technical Support to paid users. They also have extensive and comprehensive documentation, covering a vast number of issues.

- Community

It has a vibrant community forum that allows the users and technical experts from different parts of the world to connect, share their ideas, and collaborate for building better DevOps practices.

Jenkins vs GitLab

- Language

Jenkins: Java

GitLab: Ruby

- Ease of Installation

Jenkins: Easy to Install

GitLab:Easy to Install

- Plugins

Jenkins: 1700+ plugins available

GitLab: Limited Plugins

- Prerequisites

Jenkins: JRE should be installed

GitLab: Ruby, Go, Git, Node.js, and Redis should be installed

- Operating Systems Supported

Jenkins: Windows, Mac OS X, and Unix-like OS

GitLab: Supports only particular Unix-like OS such as Ubuntu, Debian, Red Hat Linux, Scientific Linux, Oracle Linux, CentOS, and OpenSUSE. It does not support Windows and macOS

- Open Source

Jenkins: Open Source and Free

GitLab: Open Source and Freemium

- Issue Tracking

Jenkins: Don’t have such functionality

GitLab: Offers various features for issue tracking and management

- Extensiveness

Jenkins: Highly extensive as it can be used as a simple CI server or can be transformed into a complex CD system with the help of plugins

GitLab: Offers scalability to enhance the DevOps lifecycle for a project

- Support

Jenkins: Offers documentation and open source community support, but no technical support is provided as part of the SLA

GitLab: Provides 24×5 support for paid users and only self-support documents to free users as part of the SLA

Which one is better: Jenkins or GitLab?

Both Jenkins and GitLab have their own set of pros and limitations, which means choosing between them is subjective to the scenario they will be used for. Although Jenkins offers more flexibility and just requires JRE as a prerequisite, it lacks support for SLA and project management features that GitLab offers. However, each of them is at par when supporting CI/CD for a software project through their advanced infrastructure and features.

Thus, it depends on the project requirements and the priorities to choose one among these two CI/CD servers.

No matter which CI/CD server is chosen, testing the application’s cross-platform compatibility on real browsers and devices is mandatory. It is the only way to guarantee that the software delivers seamless and consistent UX irrespective of the device and browser used to access them.

Emulators and simulators simply do not offer the real user conditions that software must run within, making the results of any tests run on them inaccurate. Consider testing websites and apps on a real device cloud, preferably one that offers the latest devices, browsers, and OS versions. This applies to both manual and automated testing.

How to configure Selenium in Eclipse

Garima Tiwari — Fri, 04 Feb 2022 13:15:23 +0000

Managing user experience is pivotal for software development. Test automation enables user preferences and convenience to remain at the center of the development process while saving time and effort. That is why comprehensive automation testing has become necessary to retain customers and meet their expectations. With significantly shorter time frames for development, Selenium Testing, in particular, has become an integral part of the development to facilitate automated testing of web applications.

Selenium is the most popular automated tool in existence today. 59.5% of people consider Selenium for Cross Browser Testing because of the robustness and flexibility it offers by supporting multiple languages like Java, C#, Python, Perl, Ruby, etc. However, a majority (67%) of the Selenium users prefer Java as their language for Selenium Testing.

This article discusses how to configure Selenium in Eclipse to use Selenium for Java.

Prerequisites for configuring Selenium in Eclipse

- Install Java

Download Java SE Development Kit 16.0.2 according to the Windows, Linux, or macOS platform being used.

Run the JDK Installer by double-clicking on the file name in the download location and following the instructions on the instruction wizard. Alternatively, silently install JDK by entering the following command:

jdk.exe /s

- Install Eclipse IDE

- Install Selenium

Download and Install Selenium to be set up in Eclipse.

- Install Browser Driver

For Cross Browser Testing, download the relevant Browser Driver – ChromeDriver (for Chrome), GeckoDriver (for Firefox), SafariDriver(for Safari), and InternetExplorerDriver and MSEdgeDriver (IE and Edge respectively). Place these Browser Driver files in a directory that is part of the environment PATH. This will allow a command-line call to the programs to execute them irrespective of the working directory.

- Install Java Language Bindings

-Version 3.141.59 (2018)

-Changelog

-API Docs

How to configure Selenium in Eclipse

Here are the steps to configure Selenium Webdriver with Eclipse:

Step 1: Launch Eclipse

To launch Eclipse double click on the eclipse.exe file in the download location.

Step 2: Create Workspace in Eclipse

This workspace named “C:\BrowserStack” is like any other folder, which will store all the test scripts. Launch the BrowserStack workspace.

Creating Workspace in Eclipse

Step 3: Create New Java Project in the BrowserStack Workspace

Create a new Java Project by clicking on File > New > Java Project and name it.

Creating a new Java Project

Step 4: Create Package and Class under the Java Project

By clicking on the src folder (which is the source folder), create a new package and name it (BrowserStack). Then right-click on the package name and create a class.

Creating Package in the Java Project

Creating Class in the BrowserStack Package

Step 5: Add Selenium JARs to the Java Project in Eclipse

To add the Selenium Jars to the BrowserStack Java right click on the BrowserStack Project folder and select the Properties option. In the properties window, click on the Java Build Path and Add External JARs. Browse and add the downloaded Selenium JARs i.e. Client Combined JAR and all the JARs under the Libs folder, then click Apply and Close.

Adding Selenium JARs in the BrowserStack Project

This configures Selenium with Eclipse, making it ready to execute the first test script.

Automation testing using Selenium with Java has simplified software development. Being an open-source tool, it provides an opportunity to speed up the time of execution and remove errors for a better user experience.

Java is quite popular among the developers, given the extensive support being available, making it a preferred choice as a Selenium Client Language Binding. Selenium with Java has proved helpful in optimizing regression testing and cross browser testing. With the support of Continuous Integration tools like Jenkins, Selenium with Java can be used in continuous delivery models.

Browser compatibility for ReactJS web apps

Garima Tiwari — Sun, 30 Jan 2022 16:25:14 +0000

User Experience is the key to customer delight and by ensuring a high-quality user experience through software development companies retain their customers. With the availability of a large number of devices and browsers, cross browser compatibility is essential for a seamless and consistent experience as the user switches between different devices and browsers. Cross Browser Testing thus becomes a non-negotiable and very essential part of the software development lifecycle.

ReactJS is one of the most popularly used web frameworks among the developers as of 2021, hence understanding ReactJS browser compatibility is important to achieve the best results. As a report by Statista suggests, over 40% of the developers use ReactJS to develop web applications.

Cross Browser Compatibility with ReactJS

To have a sound knowledge of ReactJS cross-browser compatibility, it is essential to first understand how ReactJS works.

How does ReactJS work?

ReactJS is an open-source JavaScript library that supports the front-end and the server using Document Object Model (DOM). It is used for UI development, wherein the user interface of the web application is developed as UI components that are aligned together for a complex comprehensive user experience. These UI components are isolated portions of the UI, based on the functions of the elements, which are further interconnected for an overall user experience.

Unlike other JavaScript frameworks, ReactJS does not work with Real DOMs, rather it has a Virtual DOM, which is a lightweight representation of the Real DOMs in JavaScript. Here the DOM is represented through a Tree Data Structure with a node for each of the UI elements. This makes the updates faster, as the entire DOM is not changed but only the difference patch is updated by recognizing the affected nodes, which speeds up the loading. Moreover, ReactJS supports both client-side and server-side rendering, which further streamlines the user interface.

React Cross Browser Compatibility

ReactJS offers code reusability, where a single piece of code for a UI component can be used across different platforms. This support for all the major browsers and platforms reflects React Cross Browser compatibility. Although a lot of the cross-browser compatibility is taken care of by the ReactJS itself, still Cross Browser Testing is important as some of the older versions of browsers have few limitations.

However, as React has individual UI components, Cross Browser Testing becomes easier and managing UX consistency across different browsers, platforms, and devices is simple. The testers can check for the HTML5 and CSS codes of the elements to ensure cross-browser compatibility, in cases where certain features might cause inconsistencies for several browser versions.

Additionally, older versions can be supported by adding polyfills in a ReactJS web app to achieve cross browser compatibility. These polyfills are third-party JS files that work similarly to JS libraries. However, polyfills are also capable of providing new functionalities. For example, a polyfill can be used to support ES6-based features in browsers that fundamentally don’t.

When a ReactJS web app Airbnb was tested on different Real Devices using a Real Device Cloud(desktops, mobiles, and tablets) across iOS and Android platforms, it was observed that the Airbnb app worked consistently on all the devices. It offered a seamless functionality providing the same user experience across different platforms and devices. Hence, it can be concluded that the Airbnb web app built using ReactJS is cross browser compatible, depicting the high browser compatibility offered by ReactJS framework.

ReactJS is one of the most popular web frameworks to build dynamic web applications. In a time when UX is pivotal and each of the web applications is accessed through multiple browsers and devices, it becomes essential to ensure a consistent user experience across browsers. Hence, React cross browser compatibility is significant during software development. By performing cross-browser tests on real browsers and devices, the tester could detect and highlight functionalities in the UX that are inconsistent with specific browser versions, which can later be fixed at the backend.