Shama Ugale, Author at Automated Visual Testing | Applitools https://applitools.com/blog/author/shamaugale/ Applitools delivers the next generation of test automation powered by AI assisted computer vision technology known as Visual AI. Thu, 20 Oct 2022 19:27:30 +0000 en-US hourly 1 Selenium Grid 4 https://applitools.com/blog/selenium-grid-4/ Tue, 15 Dec 2020 22:08:13 +0000 https://applitools.com/?p=25181 Execute the automated tests in parallel using the Selenium Grid 4 to overcome the challenge of speed and scale across browsers.

The post Selenium Grid 4 appeared first on Automated Visual Testing | Applitools.

]]>

What is Selenium Grid?

Selenium Grid is a component of the Selenium suite which enables us to distribute the tests in parallel on various combinations of browsers, operating systems, and machines saving us a lot of execution time.

Selenium Grid lets you pursue the two apparently contradictory requirements for app testing: increase test coverage and decrease test time.

Why should one consider using Selenium Grid?

Businesses are adopting agile practices to reach their users rapidly & frequently. To do this, they need to ensure the application works seamlessly across all browsers/devices and platforms.

Test automation plays a vital role in providing quick feedback on quality in order to enable these quick releases.

However, it is a challenge to achieve quick and reliable feedback with the growing number of automated tests.

To overcome the challenge of speed and scale across browsers, we can execute the automated tests in parallel using the Selenium Grid.

In this post of the Selenium 4 series we will discuss:

  • Running tests in parallel across multiple browsers / platform combinations using Selenium Grid
  • Differences in Selenium Grid 3 & Selenium Grid 4
  • Challenges/limitations of using the Selenium Grid
  • Enhanced scaling and reduced flakiness by using Applitools Ultrafast Test Cloud

How does the Selenium Grid work?

The major components of Grid are a hub and a node. The Selenium server is set up as a hub and nodes.

The hub receives a test to be executed along with information on which browser (Chrome, IE, Firefox, Safari, etc) and ‘platform’ (WINDOWS, LINUX, etc) where the test should be run. This information is passed to the Grid by setting up the capabilities and sending it to the driver constructor.  

With the hub having the list of nodes registered under it, it then selects an available node that has the requested browser-platform combination, initiates Selenium commands and passes them to the node selected. The node runs the browser and executes the test case.

Selenium Grid 3 vs Selenium Grid 4

The hub and nodes are the only components of the Selenium Grid 3. The only way to set up a grid with Selenium Grid 3 is as a Hub-Node setup.

The grid can be set up as a hub and one or more nodes registered to it. The hub and the nodes can be set up on single or separate machines. All the machines should have the selenium-standalone jar to be downloaded as a hub to represent as a hub in the cluster and a node to represent as a node with separate commands.

Selenium Grid 3 can be visualized as shown in the below diagram.

pasted image 0

With Selenium 4, the Grid has been rewritten from scratch with all modern tools and frameworks to support fully distributed testing and comes with extensive docker support.  

pasted image 0 1

Diagram: Selenium 4 Architecture from selenium.dev

Grid 4 has additional components to hub and node and enable the distributed testing and scaling of the test execution namely:

  • Router: Listens to all incoming requests and performs load balancing
  • Distributor: Listens to the new session requests and forwards it to the right Node matching the capabilities
  • Session Map: A key-value data store that stores information of the session under execution
  • Event Bus: Forms the communication bridge between the Node, Distributor and the Session Map

The hub is the collection of all the four components above.

More on new Selenium Grid 4 architecture can be found in the official documentation.

Selenium Grid 4 can be setup in various different ways

  1. Standalone: Single machine registered as a hub and a node
  2. Hub and Node: Single hub and multiple nodes on different machines and registered to the hub
  1. Distributed: Run the components of Selenium Grid individually as separate processes
  2. Docker: Run the Selenium Grid with docker and use docker for creating new instances

Limitations of using Selenium Grid

While the Selenium Grid helps us to cover the cross-browser/platform testing and reducing the test execution time by running the tests in parallel, it also may bring in some challenges such as:

  • Overhead of maintaining and procuring infrastructure
  • The need for a dedicated machine setup
  • Brittle tests due to infrastructure variations and re-running the same tests on multiple browsers  
  • Limitations on scaling based on underlying resources on the machine

Moreover, the approach of running each test across different browsers and devices still takes considerable execution time and may not be an efficient approach since the functionality rarely changes between browsers adhering to the W3C protocol, and there are more efficient ways to test the visual rendering across all environments while checking the functionality once to avoid the flakiness involved with running the test 10 times.

Applitools Ultrafast Grid

Applitools’s Ultrafast Grid brings the best of the two worlds covering functional and visual testing with a single run.

Using the Applitools Ultrafast Grid, the test is run once on a local machine on any browser and the Ultrafast Grid renders the application with all the combinations of the major browsers/platforms and devices on cloud, thus achieving the visual and the functional test coverage with a single run.

The Applitools Ultrafast Grid doesn’t need any additional infra setup or a Browser / device lab locally or in the cloud, thus eliminating the need to maintain, setup and monitor the dedicated infrastructure for cross browser testing.

Applitools Ultrafast Grid supports the rendering browser and devices listed below:

  • Browsers: Chrome, Firefox, Microsoft Edge, Safari, Microsoft IE 10, Microsoft IE 11
  • Mobile Web: iPhone and iPad devices, Samsung Galaxy devices, Kindle

Applitools’s Ultrafast Grid makes the execution faster by leveraging the Visual AI rendering and thus lowers the test maintenance and eliminates the false alarms.

To learn how to set up the Ultrafast Grid, refer to the official documentation.

Summary

In this we discussed how Selenium Grid works and how Selenium Grid 4 differs from Grid 3. We also discussed new components and the architecture of Grid 4 and the various ways it can be set up and used. We also have learnt the need to run the tests in parallel and how business can be benefited by setting up the right automation strategy and going faster to the market by using Ultrafast Grid offered by Applitools covering not only the functional tests but additionally the visual rendering too.

In the next post we shall see how Selenium Grid 4 can be set up in various ways with the use cases.

The post Selenium Grid 4 appeared first on Automated Visual Testing | Applitools.

]]>
Selenium 4: Chrome DevTools Protocol [What’s New] https://applitools.com/blog/selenium-4-chrome-devtools/ Wed, 11 Nov 2020 17:38:39 +0000 https://applitools.com/?p=24506 In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.

The post Selenium 4: Chrome DevTools Protocol [What’s New] appeared first on Automated Visual Testing | Applitools.

]]>

In the previous post of the Selenium 4 blog series, we discussed some of the new features in Selenium 4.

In this post, we will discuss one of the most anticipated features of Selenium 4 which is the new APIs for CDP (Chrome DevTools Protocol)! This addition to the framework provides a much greater control over the browser used for testing.

I’ll share some of the capabilities of the Selenium 4 CDP APIs as well as practical use cases that can take our tests to the next level!

“The getDevTools() method returns the new DevTools object which allows you to send() the built-in Selenium commands for CDP. These commands are wrapper methods that make it cleaner and easier to invoke CDP functions.”

Shama ugale

But first, what is Chrome DevTools?

Introduction to Chrome DevTools

Chrome DevTools is a set of tools built directly into Chromium-based browsers like Chrome, Opera, and Microsoft Edge to help developers debug and investigate websites.

With Chrome DevTools, developers have deeper access to the website and are able to:

  • Inspect Elements in the DOM
  • Edit elements and CSS on the fly
  • Check and monitor the site’s performance
  • Mock geolocations of the user
  • Mock faster/slower networks speeds
  • Execute and debug JavaScript
  • View console logs
  • and so much more

Selenium 4 Chrome DevTools APIs

Selenium 4 has added native support for Chrome DevTools APIs. With these new APIs, our tests can now:

  • Capture and monitor the network traffic and performance
  • Mock geolocations for location-aware testing, localization, and internationalization
  • Change the device mode and exercise the responsiveness of the application

And that’s just the tip of the iceberg!

Selenium 4 introduces the new ChromiumDriver class, which includes two methods to access Chrome DevTools: getDevTools() and executeCdpCommand().

The getDevTools() method returns the new DevTools object which allows you to send() the built-in Selenium commands for CDP. These commands are wrapper methods that make it cleaner and easier to invoke CDP functions.

The executeCdpCommand() method also allows you to execute CDP methods but in a more raw sense. It does not use the wrapper APIs but instead allows you to directly pass in a Chrome DevTools command and the parameters for that command. The executeCdpCommand() can be used if there isn’t a Selenium wrapper API for the CDP command, or if you’d like to make the call in a different way than the Selenium APIs provide.

The Chromium-based drivers such as ChromeDriver and EdgeDriver now inherit from ChromiumDriver, so you also have access to the Selenium CDP APIs from these drivers as well.

Let’s explore how we can utilize these new Selenium 4 APIs to solve various use cases.

Simulating Device Mode

Most of the applications we build today are responsive to cater to the needs of the end users coming from a variety of platforms, devices like phones, tablets, wearable devices, desktops  and orientations.

As testers, we might want to place our application in various dimensions to trigger the responsiveness of the application.  

How can we use Selenium’s new CDP functionality to accomplish this?

The CDP command to modify the device’s metrics is Emulation.setDeviceMetricsOverride, and this command requires input of width, height, mobile, and deviceScaleFactor. These four keys are mandatory for this scenario, but there are several optional ones as well.

In our Selenium tests, we could use the DevTools::send() method using the built-in setDeviceMetricsOverride() command, however, this Selenium API accepts 12 arguments – the 4 that are required as well as 8 optional ones. For any of the 8 optional arguments that we don’t need to send, we can pass Optional.empty().

However, to streamline this a bit by only passing the required parameters, I’m going to use the raw executeCdpCommand() instead as shown in the code below.

View the code on Gist.

On line 19, I create a Map with the required keys for this command.

Then on line 26, I call the executeCdpCommand() method and pass two parameters: the command name as “Emulation.setDeviceMetricsOverride” and the device metrics Map with the parameters.

On line 27, I open the “Google” homepage which is rendered with the specifications I provided as shown in the figure below.

pasted image 0 8

With a solution like Applitools Eyes, we can not only rapidly test across these different viewports with these new Selenium commands, but also maintain any inconsistencies at scale. Eyes is intelligent enough to not report false positives for small, imperceivable changes in the UI resulting from different browsers and viewports.

Simulate Network Speed

Many users access web applications via handheld devices which are connected to wifi or cellular networks. It’s not uncommon to reach a weak network signal, and therefore a slower internet connection.

It may be important to test how your application behaves under such conditions where the internet connection is slow (2G) or goes offline intermittently.

The CDP command to fake a network connection is Network.emulateNetworkConditions. Information on the required and optional parameters for this command can be found in the documentation.

With access to Chrome DevTools, it becomes possible to simulate these scenarios. Lets see how.

View the code on Gist.

On line 21, we get the DevTools object by calling getDevTools(). Then we invoke the send() method to enable the Network, and then call send() again to pass in the built-in command Network.emulateNetworkConditions() and the parameters we’d like to send with this command.

Then finally, we open the Google homepage with the network conditions simulated.

Mocking Geolocation

Testing the location-based functionality of applications such as different offers, currencies, taxation rules, freight charges and date/time format for various geolocations is difficult because setting up the infrastructure for all of these physical geolocations is often not a cost-effective solution.

With mocking the geolocation, we could cover all the aforementioned scenarios and more.

The CDP command to fake a geolocation is Emulation.setGeolocationOverride. Information on the required and optional parameters for this command can be found in the documentation.

How can we achieve this with Selenium? Let’s walk through the sample code.

View the code on Gist.

After obtaining a DevTools object, we can use its send() method to invoke the Emulation.setGeolocationOverride command, sending the latitude, longitude, and accuracy.

After overriding the geolocation, we open mycurrentlocation.net and see that North Carolina is the detected geolocation.

pasted image 0 9

Capture HTTP Requests

With DevTools we can capture the HTTP requests the application is invoking and access the method, data, headers and lot more.

Lets see how to capture the HTTP requests, the URI and the request method with the sample code.

View the code on Gist.

The CDP command to start capturing the network traffic is Network.enable. Information on the required and optional parameters for this command can be found in the documentation.

Within our code on line 22, we use the DevTools::send() method to send the Network.enable CDP command to enable capturing network traffic.

On line 23, a listener is added to listen to all the requests made by the application. For each request captured by the application we then extract the URL with getRequest().getUrl() and the HTTP Method with getRequest().getMethod().

On line 29, we open Google’s homepage and on the console the URI and HTTP methods are printed for all the requests made by this page.

Once we are done capturing the requests, we can send the CDP command Network.disable to stop capturing the network traffic as shown on line 30.

Access Console logs

We all rely on logs for debugging and analysing the failures. While testing and working on an application with specific data or specific conditions, logs help us in debugging and capturing the error messages, giving more insights that are published in the Console tab of the Chrome DevTools.

We can capture the console logs through our Selenium scripts by calling the CDP Log commands as demonstrated below.

View the code on Gist.

Within our code on line 19, we use DevTools::send() to enable the console log capturing.

Then, we add a listener to capture all the console logs logged by the application. For each log captured by the application we then extract the log text with getText() and log level with getLevel() methods.

Finally, the application is opened and the console error logs published by the application are captured.

Capturing Performance Metrics

In today’s fast world while we are iteratively building software at such a fast pace, we should aim to detect performance bottlenecks iteratively too. Poor performing websites and slower loading pages make unhappy customers.

Can we validate these metrics along with our functional regression on every build? Yes, we can!

The CDP command to capture performance metrics is Performance.enable. Information for this command can be found in the documentation.

Lets see how it’s done with Selenium 4 and Chrome DevTools APIs.

View the code on Gist.

First, we create a session by calling the createSession() method from DevTools as on line 19.

Next, we enable DevTools to capture the performance metrics by sending the Performance.enable() command to send() as shown on line 20.

Once Performance capturing is enabled, we can open the application then send the Performance.getMetrics() command to send(). This will return a list of Metric objects which we then stream to get all of the names of the metrics captured as on line 25.

We then disable capturing the Performance on line 29 by sending the Performance.disable() command to send().

To see the metrics that we are interested in, we define a List called metricsToCheck then loop through this to print the metrics’ values.

Basic Authentication

Interacting with browser popups is not supported in Selenium, as it is only able to engage with DOM elements. This poses a challenge for pop-ups such as authentication dialogs.

We can bypass this by using the CDP APIs to handle the authentication directly with DevTools. The CDP command to set additional headers for the requests is Network.setExtraHTTPHeaders.

 Here’s how to invoke this command in Selenium 4.

View the code on Gist.

We begin by using the DevTools object to create a session, and enable Network. This is demonstrated on lines 25-26.

Next, we open our website then create the authentication header to send.

On line 35, we send the setExtraHTTPHeaders command to send() along with the data for the header. This is the part that will authenticate us and allow us to bypass the browser popup.

To test this out, we then click the Basic Authentication test link. If you try this manually, you’ll see the browser popup asking you to login. But since we sent the authentication header, we will not get this popup in our script.

Instead, we get the message “Your browser made it!”.

Summary

As you can see, Selenium has become a lot more powerful with the addition of the CDP APIs. We can now enhance our tests to capture HTTP network traffic, collect performance metrics, handle authentication, and emulate geolocations, time zones and device modes. As well as anything else that is possible within Chrome DevTools!

In the next post of this series, we will explore more new Selenium 4 features such as Observability and enhanced exceptions along with the brand new Selenium Grid 4.

The post Selenium 4: Chrome DevTools Protocol [What’s New] appeared first on Automated Visual Testing | Applitools.

]]>
Selenium 4 – New Features of Selenium WebDriver https://applitools.com/blog/new-features-selenium4/ Mon, 05 Oct 2020 22:31:36 +0000 https://applitools.com/?p=23763 Manoj Kumar published a teaser on Selenium 4, listing the new features expected and important deprecations across the Selenium Suite( Selenium IDE, Selenium WebDriver, and Grid).  This has already caused...

The post Selenium 4 – New Features of Selenium WebDriver appeared first on Automated Visual Testing | Applitools.

]]>

Manoj Kumar published a teaser on Selenium 4, listing the new features expected and important deprecations across the Selenium Suite( Selenium IDE, Selenium WebDriver, and Grid). 

This has already caused a buzz in the industry for not only testers but for the Ops and Dev communities as well. And why wouldn’t it?

Features such as the integration of DevTools APIs with Selenium Webdriver and Observability add a lot of value and expand Selenium’s reach.

Many requests were made by the community, asking for details on each of the features. Hence we started this series of posts addressing the features of Selenium 4.

In the first blog post of the Selenium 4 series, we discussed the deprecated components and their replacements.

In this blog post, as well as the next one, we will focus on some of the new features offered in Selenium 4, including:

Make sure you install Selenium 4 to be able to try the features we’ll discuss.

Don’t Miss: Test Driving Selenium 4 with Angie Jones [webinar]

Relative Locators in Selenium 4

All the engineers working on building web-based test automation scripts spend quite a bit of time writing and maintaining locators across the builds. It can be challenging to locate a few of them, especially the grids. 

Tools such as Sahi and Taiko already have features to locate nearby elements by specifying the directions, however to accomplish this in Selenium requires complicated Xpath or CSS selectors to navigate to a “direction” around the hierarchical tree nodes in the DOM. This limitation often leads to inefficient locators, which make the tests brittle.

Relative Locators have come to the rescue by helping us locate elements based on their position with respect to other elements.

Relative locators provide a newly added locator strategy to the existing eight (id, name, XPath, cssSelector, linkText, partialLinkText, className, and tagName) locator strategies. Relative locators locate the elements with respect to nearby specified elements.

A new method withTagName() is added, which returns an instance of RelativeLocator.RelativeBy class, a child class of By and offers methods to specify the direction of an element to be located.

above()

Used to locate an element just above the specified element

below()

Used to locate the an element just below the specified element

toLeftOf()

Used to locate the an element located on the left of a specified element

toRightOf()

Used to locate the an element located on the right of a specified element

near()

By default, it is used to locate an element at 50 pixels distant from a specified element. The distance can be passed as an argument to an overloaded method.

Let’s learn to use them with an example. We will use Advanced Blogs on Applitools webpage for this exercise.

pasted image 0 1

On the Landing page we could see 12 blogs with titles and links to the blogs listed in four rows and three columns each. Inspecting the page, we see each of the elements are listed using the ‘article’ tag and an id attribute.

For instance, I need to locate the Blog ”How to Visually Test React Components Using Our Storybook SDK,” which is visually located just below the first blog, “Migrating to Selenium 4: Here’s What Has Changed”.

Inspecting the DOM, I learned that all blogs have the html tag “article” and the blog “Migrating to Selenium 4: Here’s What Has Changed” has an attribute id as “post-22539”.

pasted image 0

I could now locate “How to Visually Test React Components Using Our Storybook SDK” specifying its html tag “article” using withTagName(“article”) method and locating the “How to Visually Test React Components Using Our Storybook SDK” element with below() method as demonstrated on line 18.

First the “Migrating to Selenium 4: Here’s What Has Changed” blog is located using the id attribute and then below() method is used as direction to locate the “How to Visually Test React Components Using Our Storybook SDK” blog element.

View the code on Gist.

Similarly, refer to the sample code for the usage for above(), toRightOf() and toLeftOf() methods.

For more information on Relative Locators, see this article by Angie Jones.

Multiple Windows and Tabs

Need to work with multiple windows or applications in a single test flow?  This is now possible!

We can create and open a brand new or tabbed window in the same session without having to create a new driver object to manage multiple applications in the same test.

This can be done with the newWindow() method.

On line 23 of the following code snippet, we create a brand new window by passing WindowType.WINDOW to newWindow() method. This will create a new window with the same driver reference.

On line 25 we open YouTube in this window by using navigate().to() method or get() method.

Similarly, we could create a new tabbed window by passing WindowType.TAB as a parameter to newWindow() as shown on line 39.

View the code on Gist.

To switch between these windows, you need to fetch the window IDs just like in the above example from line no 27-36, as we have been doing it in the previous versions of Selenium WebDriver.

W3C Standardization

Selenium is a widely used tool for end users as well as vendors. Other popular automation tools such as Appium and Protractor are built on top of Selenium APIs.

With this, the tools that integrate with Selenium 4 now need to follow the W3C standard protocol.

In previous versions of Selenium Webdriver, JSON wire protocol was used to communicate between the Selenium Webdriver APIs and the browser native APIs. Every request and response communicated across the protocol was encoded and decoded. With W3C compliance, the communication between WebDriver and the browsers happens directly without any encoding and decoding required.

This means any software following W3C standard protocol can be integrated with Selenium with no compatibility issues. All the major browsers such as Chrome, IE and Safari are already W3C standard compliant.

Summary

We went through a few of the new methods and features implemented in Selenium 4 and have provided ready-to-use code snippets for working with new and tabbed windows, installing and uninstalling the addons for Firefox and taking element level screenshots.

We learned how to use a brand new locator strategy, the Relative Locators, introduced in Selenium 4. We also discussed the importance of W3C standardization for tool vendors and products built on top of Selenium.

Check out the next post of this series, where we will explore more brand new features in Selenium 4 such as Chrome DevTools Protocol.

The post Selenium 4 – New Features of Selenium WebDriver appeared first on Automated Visual Testing | Applitools.

]]>
How to Upgrade to Selenium 4 https://applitools.com/blog/how-to-install-selenium-4/ Fri, 25 Sep 2020 21:03:53 +0000 https://applitools.com/?p=23570 In this series on Selenium 4, we are providing use cases and code samples to explore the upcoming changes to the WebDriver API. In the previous blog post, we discussed...

The post How to Upgrade to Selenium 4 appeared first on Automated Visual Testing | Applitools.

]]>

In this series on Selenium 4, we are providing use cases and code samples to explore the upcoming changes to the WebDriver API.

In the previous blog post, we discussed Migrating to Selenium 4 and today we’ll detail how to install Selenium 4 so that you can check out all of the new features!

While Selenium has various language bindings, Java and JavaScript are the most widely used, so this post will cover how to install these two bindings. 

Supercharge Selenium with Applitools Visual AI

Get Started

Java

How to Upgrade from Selenium 3 to Selenium 4

If you are already using Selenium with Maven, you can upgrade it to Selenium 4 by changing the Selenium version to 4. Refer to line 28 in the example below:

View the code on Gist.

If you are already using Selenium with Gradle, you can upgrade it to Selenium 4 by changing the Selenium version to 4 as shown on line 17 in the example below:

View the code on Gist.

How to Install Selenium 4

Before beginning, make sure Java is installed on your machine and the JAVA_HOME environment variable is set in your system path.

The Selenium Java binding can be set up in two different ways: via build tools, or manually. I’ll outline the steps for both. However, you only need to choose one approach.

Install Selenium via build tools

There are various Java build tools available to manage the build and dependencies; the most popular and widely used ones are Maven and Gradle.

Install and setup Maven

Maven is a build and dependency management tool for Java based application development which helps with complete build lifecycle management.

Maven is also available with the Java IDEs (IntelliJ, Eclipse, etc) as a plugin.

However, if you are not using the plugin, you can install Maven manually.

Download Selenium using Maven

Maven looks for a pom.xml file for information on project, configuration, dependencies and plugins etc.

Maven Central Repository is the place where all the dependencies/libraries for all versions can be found. We can search for a library and copy and paste the dependency into our pom.xml file to download them.

For example, Selenium 4 can be downloaded using maven by adding the dependencies in pom.xml as shown in the below sample:

View the code on Gist.

Test Setup

You are now all set to write tests and run them through the IDE or through the command line. You can test the setup, by adding the following code snippet into a new Java class under the ‘src’ directory.

View the code on Gist.

Install and setup Gradle

Gradle is another popular build tool used for java based applications these days. It’s open source and the build scripts can be written in Groovy or Kotlin DSL.

Gradle can be also installed as a plugin in Java IDEs (IntelliJ, Eclipse, etc).

However, if you are not using the plugin, you can install Gradle manually.

Download Selenium using Gradle

Gradle looks for a build.gradle file where all the dependencies, plugins and build scripts are written.

Maven Central Repository is the place where all the dependencies/libraries for all versions can be found for Gradle as well. We can search for a library and copy and paste the dependency from the Gradle tab into our build.gradle file to download them.

For example, Selenium 4 can be downloaded using gradle by adding the dependencies in build.gradle file as shown in the below sample.

View the code on Gist.

Test Setup

You are now all set to write tests and run them through the IDE or through the command line. You can test the setup, by adding the following code snippet into a new Java class under the ‘src’ directory and build.gradle file in the project root directory.

View the code on Gist.

Install Selenium manually

Download Selenium

The jar files for Selenium 4 Java bindings can be downloaded from the official Selenium downloads page.

It will be downloaded as a zip file, unzip it.

Selenium scripts can be executed on various platforms, namely Firefox, Chrome, Internet Explorer, Safari, Opera and Edge. To explore and install the drivers for each refer to documentation links under the “Browsers” section on Downloads page.

Add Selenium to IntelliJ

Within IntelliJ:

Go to the File Menu  Project Structure  Modules  Dependencies Click on ‘+’ Sign -→ Select JARs or directories → Select all the Selenium jar files and click on OK button.

Also, add the downloaded browser drivers under the project directory. In our example we will add chromedriver to run our tests on Chrome browser.

Test Setup

Create a new Java file under the ‘src’ directory and add this code:

View the code on Gist.

JavaScript

You can download and manage the Selenium JavaScript bindings using npm.

Install NodeJs and NPM

As a prerequisite, NodeJs needs to be downloaded and installed on the machine. To verify the installation, use the below two commands

node -v
npm -v

Both should give the current version installed as an output.

Download and install Selenium Webdriver

Using the below command we will install Selenium with npm package manager on your machine.

npm install -g selenium-webdriver

Additionally, to run the tests on the browsers (Chrome, Firefox and IE etc), browser drivers need to be downloaded and set in the system path.

The drivers can be downloaded from the Downloads page and the links can be found under the “Browsers” section on the page. Windows users may add the driver path to the PATH variable under environment variables. Mac and Linux users need to add a driver path to the $PATH variable in the shell.

Once we have installed the Selenium libraries and set the path for the browsers, we need to add the package.json file to the project root directory. NPM requires this file to install the dependencies and plugins used to build the project along with running the tests.

package.json can be created either manually or running the below command which adds the file to the current directory it is run from.

 npm init

Below sample package.json file can be referred for installing Selenium 4 and running our tests. If you are already using Selenium Javascript bindings, to upgrade to Selenium 4, change the version as shown on line 12 in the below sample build file.

View the code on Gist.

Once you have updated the Selenium 4 dependencies in the package.json file, run the below command to install all dependencies defined in your package.json file under dependencies section.

npm install

The test is written in “googleSearchTest.js” file. Below is the sample code, which opens a Firefox browser, navigates to google.com and searches for “Selenium 4” and hits ENTER.

View the code on Gist.

To execute the test use the below command

node googleSearchTest

Summary

We went through the setup instructions for Selenium 4 for two most popular language bindings – Java and JavaScript with ready to use sample tests and build files.

Now that we are ready with the Selenium 4 setup on our machine, in the next post of this series, we will explore the newly added features offered in Selenium 4 and the benefits they provide with working code samples.

The post How to Upgrade to Selenium 4 appeared first on Automated Visual Testing | Applitools.

]]>
Migrating to Selenium 4: Here’s What Has Changed https://applitools.com/blog/selenium-4-migration/ Thu, 10 Sep 2020 20:22:47 +0000 https://applitools.com/?p=22539 A guide to notable changes and deprecations for engineers looking to migrate from Selenium 3 to Selenium 4. There is huge excitement within the testing community since Simon Stewart, the...

The post Migrating to Selenium 4: Here’s What Has Changed appeared first on Automated Visual Testing | Applitools.

]]>

A guide to notable changes and deprecations for engineers looking to migrate from Selenium 3 to Selenium 4.

There is huge excitement within the testing community since Simon Stewart, the lead of the Selenium project, announced the release of Selenium 4 with major changes and W3C standardization to the Selenium suite (Selenium IDE, Selenium WebDriver and Selenium Grid) during the official Selenium Conference 2018 at Bangalore, India.

Supercharge Selenium with Applitools Visual AI

Get Started

As of early September 2020, the alpha version of Selenium 4 is available and can be downloaded to explore.

Manoj Kumar has already explained at a high level what’s new in Selenium 4, and in this weekly blog series, we will discuss these features in detail with code snippets, benefits and possible use cases for the end users and well as the dev community who have built tools/products on top of Selenium.

Key takeaways

  • Understand the deprecated components and their replacements
  • Plan the migration from Selenium 3 to 4

Selenium is a toolset for web browser automation that allows us to remotely control browser instances and emulate a user’s interaction with the browser. There are many changes in Selenium 4, the major being the W3C standardization, which implies that Selenium can be integrated with any software without any compatibility issues. Along with W3C standardization, there are few new methods added and deprecated/replaced.

Let’s discuss these in detail.

What’s been deprecated in Selenium 4?

There are a couple of deprecations in Selenium 4. Let’s explore them.

FindsBy

FindsBy interfaces are part of org.openqa.selenium.internal package having findElement(By) and findElements(By) methods, implemented by the RemoteWebDriver class. These are now deprecated as part of Selenium 4.

This is an internal change and does not impact end users, however if you have a product or tool built on top of Selenium APIs, have a look into these changes.

The By class can be used with findElement(By) and findElements(By) just like before.

View the code on Gist.

Actions

The Actions class is a user-facing API for emulating complex user gestures like hovering, mouse movements, etc.

A few new methods have been added to the Actions class as a replacement of the classes under package org.openqa.selenium.interactions:

click

A new method click(WebElement) is added to Actions class and is a replacement of moveToElement(onElement).click() and is used to click on an element.

clickAndHold

Similarly, clickAndHold(WebElement) is used to click on an element without releasing and should be used as an replacement of moveToElement(onElement).clickAndHold()

contextClick

contextClick(WebElement) is a replacement of moveToElement(onElement).contextClick() which was used to right click on an element.

doubleClick

doubleClick(WebElement) is used to double click on an element and is a replacement of moveToElement(element).doubleClick().

release

release() is used to release the depressed left mouse button at the current mouse location. This was earlier part of org.openqa.selenium.interactions.ButtonReleaseAction class, and is now moved to Actions class.

Examples

The below example demonstrates the usage of Actions methods discussed in Selenium 3 from line 17 to 33.

These methods can be replaced as shown in the below code snippet as part of Selenium 4 implementation from line 37 to 53.

View the code on Gist.

FluentWait

The methods withTimeout() and pollingEvery() from FluentWait class have been changed. Now both methods accept a single parameter java.time.Duration in replacement of two parameters int and TimeUnit. Lets see the usages.

In the Selenium 3 example below, we see on line 6, the pollingEvery() method takes two parameters int and TimeUnit and can be imported from the package java.util.concurrent.TimeUnit. On line 7, withTimeout() also accepts int and TimeUnit as parameters.

Selenium 4 has replaced the TimeUnit with Duration and here is the sample code snippet demonstrating it. On line 12, pollingEvery() method now accepts only one parameter, Duration.

The Duration class can be imported from the java.time package and has methods to represent time duration in nano, millis, seconds, minutes, hours, days and so on.

In our example we have used ofMillis(int) and ofSeconds(int) methods.

Similarly, on line 14 withTimeout() method accepts Duration as a parameter.

View the code on Gist.

Driver Constructors

A couple of driver constructors have been deprecated. Namely, the ones that accepted Capabilities objects have been replaced with ones that accept Options.

This means you will need to create a specific Options object for whichever Driver class you’re using, set your requirements and pass this object to the Driver constructor.

Examples for each of the drivers can are below

ChromeDriver

ChromeDriver(Capabilities) is replaced by ChromeDriver(ChromeOptions).

View the code on Gist.

SafariDriver

SafariDriver(Capabilities) is replaced by SafariDriver(SafariOptions).

View the code on Gist.

EdgeDriver

EgdeDriver(Capabilities) is replaced by EdgeDriver(EdgeOptions).

View the code on Gist.

FirefoxDriver

FirefoxDriver(Capabilities) is replaced by FirefoxDriver(FirefoxOptions).

View the code on Gist.

InternetExplorerDriver

InternetExplorerDriver(Capabilities) is replaced by InternetExplorerDriver(InternetExplorerOptions).

View the code on Gist.

Summary

We went through the major deprecations in Selenium 4 and have outlined the ones that are important for end users in their migration from Selenium 3 to 4.

The list of all deprecations can be explored in the Selenium WebDriver API docs. There are considerable internal interfaces, classes and ENUMs deprecated which have no impact on end users but may be of importance to vendors of tools and products built on top of Selenium.

In the next post of this series, we will explore the newly added features offered in Selenium 4 and the benefits they provide.

About the Author

Shama Ugale is a quality assurance specialist at Thoughtworks. She has great knowledge about Selenium project and Selenium 4 that she is happy to share with you. You can finder on LinkedIn at https://www.linkedin.com/in/shama-ugale-7a95b549/

The post Migrating to Selenium 4: Here’s What Has Changed appeared first on Automated Visual Testing | Applitools.

]]>