Forem: himanshuseth004

How to Use Selenium and Cypress for Canvas Automation

himanshuseth004 — Tue, 04 Feb 2025 09:39:01 +0000

The Canvas element in HTML (or ) is majorly used for rendering graphics, animations, and other interactive content on a web page. Though the Canvas element is a part of the DOM, content inside the Canvas is not a part of it! This essentially means that the traditional DOM-based validations do not hold well for the automated handling of Canvas elements.

Over & above, automating Canvas interactions with Cypress is a tad easier than Selenium. This is because Cypress runs within the browser’s context, providing you seamless access to JavaScript APIs like the Canvas API. In this blog, we will be covering using Selenium (Python) and Cypress for Canvas element automation with hands-on examples.

What Is Canvas Element in HTML?

The Canvas () element is used for drawing graphics or other visual content on-the-fly on a web page. Along with animations, the Canvas element can also be used for drawing charts, animations, and other custom visualizations on the page.

The Canvas element was introduced as a part of the HTML5 standard for reducing the dependencies on plugins like Adobe Flash and Microsoft SilverLight, both of which have already reached EOL (End Of Life).

The element, which is essentially a blank container, heavily relies on JavaScript for drawing any graphics and performing interactive actions. As stated in the Canvas API Documentation, the Canvas APIs primarily focus on 2D graphics. WebGL (Web Graphics Library), a JavaScript API for rendering high-performance interactive 2D & 3D graphics, also makes use of the element.

Example 1:

As shown below, graphics in the LambdaTest Bug Smasher Game are housed in the *element. After locating the Canvas element using the ID — *document.getElementById(“unity-canvas”), we get the details (i.e., dimensions/size) of the said element.

The above command, when run on the Browser console, provides the following output:

<canvas id="unity-canvas" width="1920" height="1200" style="width: 960px; height: 600px; cursor: default;"></canvas>

The Canvas element is identified using the ID attribute (i.e., unity-canvas)
The width=”1920″ and *height=”1200″ *attributes define the actual size of the Canvas element used for drawing/rendering
style=”width: 960px; height: 600px;” *defines the display size of the Canvas element on the page. In this case, a scaling factor of 0.5 (*width = 960/1920 and height = 600/1200) is used when locating elements in the Canvas via its coordinates

Example 2:

Another example of the Canvas element is a rendering of a Bar Graph in CanvasJS. After locating the Canvas element using Selenium locators document.getElementById(“themes-chart”), we get the details (i.e., dimensions/size) of the said element.

The above command, when run on the browser console provides the following output:

<div id="themes-chart" style="width: 100%; height: 441px;"><div class="canvasjs-chart-container" style="position: relative; text-align: left; cursor: auto; direction: ltr;"><canvas class="canvasjs-chart-canvas" width="1892" height="882" style="width: 946px; height: 441px; position: absolute; user-select: none;"></canvas>...</div>

The Canvas element is identified using the ID attribute (i.e., themes-cart)
The width=”1892″ and *height=”882″ *attributes define the actual size of the Canvas element used for drawing/rendering
style=”width: 946px; height: 441px;” *defines the display size of the Canvas element on the page. In this case, a scaling factor of 0.5 (*width = 946/1892 and height = 441/882) is used when locating elements in the Canvas via its coordinates

As seen from the above examples, the internal resolution and display size difference are different (i.e., scaling — 0.5) and can affect the quality of the rendering. When automating interactions with Canvas elements, it is important to take the scaling into account to ensure the accuracy of mouse movement actions.

In this blog, I will automate Canvas elements on the local Chrome browser and/or Chrome installed on the LambdaTest cloud grid.

LambdaTest is an AI-based test orchestration and execution platform that allows automated tests to be run at scale in more than 3,000 environments. It also supports automating Canvas elements on multiple browsers using popular frameworks like Selenium and Cypress.

The getBoundingClientRect() Method

Though the element is a part of the DOM, the elements rendered inside it are not represented in the DOM. This makes automating Canvas challenging, as the elements within the DOM have to be located using the co-ordinates.

This is where the getBoundingClientRect() method of the Element class can be leveraged, as it provides the size of the element and its properties relative to the viewport. The *getBoundingClientRect() *method returns a *DOMRect *object that contains the following properties (in pixels):

Shown below is the pictorial view of the BoundingRect() method that deep dives in the approach used for calculating the properties:

When automating interactions with the Canvas element, set a consistent viewport size (e.g., 1024 * 768) and maintain a constant zoom-level (100% preferred) for reliable automation results.

Let’s fetch the DOMRect properties, by executing the *document. getElementById(“unity-canvas”).getBoundingClientRect *command on the browser console. Shown below is the command in action for the LambdaTest BugSmasher game:

Now, let’s resize the browser window and check the properties contained in the DOMRect object:

As seen from the above screenshots, certain DOMRect properties, namely X, Y, top, right, bottom, and left, change with a resized browser window. Like other Selenium best practices, it is recommended to instantiate the respective browser in maximized mode so that the DOMRect *properties (i.e., *top, right, bottom, and left) are consistent across subsequent runs.

To summarize, the getBoundingClientRect() method plays a pivotal role in handling Canvas elements by providing accurate size and coordinates relative to the viewport.

Tracking Mouse Movements in Canvas Elements

As seen so far, interaction with Canvas content is based on precise coordinates rather than element-based tracking (which is normally used with DOM-based interactions). This is precisely why tracking mouse positions becomes essential to ensure that automation mimics real user behavior.

During the process of writing this blog, I tried automating different Canvas element scenarios with Selenium as well as Cypress. Since Cypress tests run directly in the browser, I found it relatively easy to use Cypress for Canvas automation.

As far as automation with Selenium is concerned, this insightful StackoverFlow thread helped a lot in calculating Canvas element coordinates more robustly. As stated in the W3C specification, the offset of action commands is calculated from the center of a WebElement.

Regardless of the automation framework used, such as Selenium or Cypress for Canvas automation, it is imperative to track mouse movements so that coordinates can be adjusted as needed.

I used the prompt “*Show a dot wherever the mouse pointer is.” *This code will be used for Selenium and Cypress for Canvas automation and fed into the AI tool that assisted me with code development.

Here is the AI-generated code that will show a Red (#FF0000) dot with every mouse movement.

/* Customized command to show the click on the element */
Cypress.Commands.add('showClickCoordinates', (element, x, y) => {
 cy.wrap(element).then(($el) => {
   // Reference - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
   const rect = $el[0].getBoundingClientRect();


   cy.window().then((win) => {
     // Create a new dot element
     const dot = win.document.createElement('div');
     dot.style.position = 'absolute';
     dot.style.width = '10px';
     dot.style.height = '10px';
     dot.style.backgroundColor = 'red';
     dot.style.borderRadius = '50%';
     dot.style.zIndex = '9999';


     // Adjust the top and left coordinates to be relative to the element
     dot.style.top = `${rect.top + y}px`;
     dot.style.left = `${rect.left + x}px`;


     // Append the dot to the body
     win.document.body.appendChild(dot);


     // Remove the dot after 3 seconds
     setTimeout(() => {
       dot.remove();
     }, 3000);
   });
 });
});

Here is a short gist of the above AI-generated snippet, the primary purpose of which is to position a Red (#FF0000) colored dot relative to an element in the Canvas. Let’s dive deep into the essential aspects of the snippet:

Step 1. Cypress.Commands.add adds a Cypress custom command (named showClickCoordinates) that can be reused throughout the tests. It takes three input parameters:

element: DOM element where the click needs to be highlighted
x: X-coordinate calculated relative to the element’s bounding box
y: Y-coordinate calculated relative to the element’s bounding box

Step 2: getBoundingClientRect() provides the element’s size and position relative to the viewport. For the current use case, we extract the top, left, width, and height properties of the said element.

Step 3: cy.window() helps provide access to the browser’s window object (i.e., win)

Step 4: This is the crux of the code where win.document.createElement helps in creating a new div element in the DOM (to act as a dot). Here is the styling of the dot:

position: absolute: Places the dot at an exact mouse position
width *and *height: Defines the size of the dot
backgroundColor: ‘red’: Makes the dot visible as red (#FF0000)
borderRadius: ‘50%’: Makes the dot a circle
zIndex: ‘9999’: Ensures the dot appears above other elements

Step 5: The top (rect.top) and left (rect.left) styles are calculated to position the dot relative to the element in the viewport. Here, x and y are the coordinates offset inside the element.

The dot is finally appended to the body of the document, making it visible on the page.

Step 6: dot.remove() removes the displayed dot to clean up the DOM after a set timeout of 3 seconds.

Shown below is a sample use of the Mouse Movement tracking code when used for automating Canvas elements in the LambdaTest Bug Smasher game:

We will use the above AI-generated code with Selenium and Cypress for Canvas automation examples, which will be demonstrated in later sections of the blog. AI can help speed up code generation and streamline workflows, allowing QA’s to leverage its benefits by generating tests using AI. Since Canvas interactions are heavily based on coordinates, you could also use Chrome/Brave extensions like Page Ruler to measure distances (in pixels) on a webpage.

Now, let’s get our hands dirty with some hands-on experiments with Selenium and Cypress or Canvas automation!

Using Cypress for Canvas Automation

For this demonstration, we will automate the play of LambdaTest Bug Smasher. If you are new to Cypress on the LambdaTest cloud, you can check out the blog on how to write your first Cypress test, which dives into the nuances of Cypress execution on LambdaTest.

Canvas automation demonstration should work seamlessly on Cypress LambdaTest cloud as well as on Cypress installed on your local machine. In both cases, Chrome is chosen as the browser for the test. The configuration for executing the Canvas tests on LambdaTest is available in lambdatest-config.json. You need to add your LambdaTest user name and access key, details of which can be fetched from the Account Settings Page.

Now that the setup is ready, let’s look at how we automated gameplay using Cypress; the entire implementation is available in canvas-element-handling.cy.js

Code Walkthrough:

Step 1: To get started, set the viewport to 1024 * 768 using the cy.viewport() method. Post that, and navigate to the LambdaTest Bug Smasher game page. It is important to note that the coordinate values used in the tests might need to be changed if the viewport size changes.

*Step 2: **Next, the *cy.document() method yields the window.document object (i.e.,, doc). The doc.readyState property indicates the document’s current loading state.

The doc.readyState *property value is checked if it is *complete, which indicates that the document and its corresponding resources (e.g., images, stylesheets, etc.) are fully loaded.

**Step 3 (Optional): **This step simply retrieves the dimensions of the viewport (in pixels). In our case, we set the viewport size to 1024 (width) and 768 (height).

Once the window object is retrieved with the cy.window() method, the innerWidth and innerHeight properties are obtained to fetch the width & height of the viewpor*t,* respectively.

*Step 4: **The Canvas element is located using the ID locator (i.e., *#unity-canvas), which is passed to the cy.get() method.

Once the element is located, its width & height (when rendered on the page) properties are read using $canvas[0].width & $canvas[0].height respectively. The intrinsic resolution of the Canvas in pixels is set to width: 1920px; height: 1200px;

It is important to note that these properties indicate the CSS-rendered size of the Canvas on the document (i.e., width: 960px; height: 600px;).

Step 5: *The remaining Canvas properties (*X, Y, top, bottom, left, right) are also **read using the getBoundingClientRect() method, which we discussed in earlier sections of the blog.

The CSS-rendered Canvas width & height are assigned to canvasDisplayedWidth & canvasDisplayedHeight variables, respectively.

*Step 6: **The scaleFactor is set to 0.5 since the CSS-rendered Canvas width is half of the Canvas displayed width. *centerX & centerY of the Canvas are calculated for operations to be performed on the Canvas.

Step 7: *When calculating the offset, I played around with a few values after *getting the property values using the *getBoundingClientRect() *method.

The variables buttonXInCanvas and buttonYInCanvas are set to twice of Canvas center values.

**Step 8: **The X coordinate from the earlier step is multiplied by the scale factor (i.e., 0.5 in this case).

*Step 9: **The *cy.wrap() wraps a DOM element (i.e., element) into a Cypress chainable object.

Here, the Cypress custom command (e.g., showClickCoordinates), which shows a red-colored dot in the center of the Canvas (e.g., canvasCenterX & canvasCenterY), is wrapped in the cy.wrap() method.

*Step 10: **The next important step is to locate the *Play Now button in the Canvas. As seen in the screenshot below, the position of the Play Now button can be computed by negating a couple of pixel values from buttonYInCanvasScaled (which is set to canvasCenterY * 2).

In our case, subtracting Top/Y (i.e., 89.5 pixels) from buttonYInCanvasScaled *provided the exact coordinates of the *Play Now button. Since the value of the Top/Y property might change with the zoom level and viewport size, it is always recommended to keep the zoom level to 100% and set the viewport size (e.g., 1024 * 768 in this case) before triggering the tests.

*Step 11: **Cypress invokes the *click() method to click on the Play Now button. The force option in the click() method is set to *true *since it bypasses certain default checks (e.g., element visibility, interactability, etc.) that Cypress performs before interacting with elements.

The option might not be needed in our case since the Play Now button is also visible and interactable.

**Step 12 (Final Game Play — 1): **This takes us inside the game arena! As mentioned so far, it would be time-consuming to locate the objects (e.g., bugs) and then act on them.

An easier approach would be to create random X and Y coordinate value pairs, taking into consideration the required properties returned by the getBoundingClientRect() method.

The getRandomCoordinates() *function provides randomized X and Y coordinates using the following calculation: a float random number between 0 and 1 is generated using the *Math.random() function in JavaScript.

The generated random number is multiplied by the Canvas width (for X) and height (for Y). The resultant is then added to the top property (for X) and left property (for Y). A buffer of 200 pixels is added to the final result to ensure that the generated X-Y coordinates are located within the game area (marked in red in the screenshot).

let randomX = Math.floor(Math.random() * (canvasWidth)) + left + 200;
let randomY = Math.floor(Math.random() * (canvasHeight)) + top + 200;

If the generated values are greater than canvasWidth and/or canvasHeight, they are set to canvasCenterX and canvasCenterY, respectively.

*Step 13 (Final Game Play — 2): **Now that we have the coordinates handy, a click is generated every 500 ms using the *cy.click() method. Since no object model detection is implemented in the code, there is a possibility of clicking on a bomb object, which results in the end of the game.

**Step 14 (Clicking the LinkedIn Button — Outside Canvas): **In the LambdaTest Bug Smasher game, the social media icons (e.g., LinkedIn and Twitter) are placed outside the Canvas.

First, the LinkedIn button is located with the CSS Selector locator. The window.open() method is stubbed with the cy.stub(win, ‘open’).as(‘windowOpen’), where win is the window handle.

Since the window is stubbed, it does not open an actual window or tab. This Cypress tutorial explains Cypress stubs and other important concepts related to the framework.

Finally, a click operation is performed on the window, and Cypress.sinon.match() is called to ensure that the string contains the substring linkedin.com.

Now, let’s execute the tests on Cypress on the LambdaTest cloud grid and Cypress installed on a local machine!

Execution

Before we start the tests, let’s set up the virtual environment (venv), which will help us better manage the environment and dependencies.

venv plays an instrumental role in providing isolation from the packages installed in the base environment. Run the commands virtualenv venv and source venv/bin/activate on the terminal to create the virtual environment.

Next, export the environment variables LT_USERNAME and LT_ACCESS_KEY on the terminal.

export LT_USERNAME=

export LT_ACCESS_KEY=

You can get these details from the Password & Security section. For execution on LambdaTest, first, install the dependencies by triggering the command make install from the root folder of the project.

With the dependencies installed & environment variables exported, you can trigger the command make cloud-canvas-automation-cypress from the root folder on the terminal. This makes the command internally execute the command lambdatest-cypress run that triggers the Canvas element test on the LambdaTest grid.

You can check out the support documentation on getting started with Cypress testing in case you encounter any issues with the execution. Once the tests are triggered, you can check the status on the LambdaTest Automation Dashboard.

As seen above, we automated interactions with the Canvas element and also achieved a score of 85 🔥

The same test can also be executed on Canvas (on the local machine) by triggering the command make local-canvas-automation-cypress, which internally triggers npx cypress run-browser chrome-headed to the terminal.

With this, we have learned to use Cypress for Canvas automation! However, regardless of the Canvas element type (e.g., bar graphs, pie charts, etc.), you can still use the learnings from this section to automate Canvas interactions!

Using Selenium for Canvas Automation

There are scenarios where you might need to extract stats from graphs (e.g., pie charts, bar graphs, etc.) and report them to your organization’s higher stakeholders. For example, a bar graph can showcase an organization’s monthly sales data. Similar to this, the data can also be projected in the form of pie charts, line charts, and more!

Here is another example of a pie-chart deep diving into Employee Distribution by location. An automation script can be written to extract the tool-tip information from each quadrant in the element.

To demonstrate how Selenium handles Canvas elements, we will extract monthly sales data from a Canvas element in CanvasJS.

You can check out my Selenium Python tutorial if you want a quick refresher on automation with Selenium and PyUnit (& Pytest). In this Canvas bar graph example, we have used the PyUnit/unittest framework. However, the test can be easily ported for testing with the pytest framework.

Code Walkthrough:

Step 1: Since we are using the PyUnit (or unittest) framework for test automation, the browser & platform capabilities are set in the method implemented under the setUp() annotation.

The capabilities are generated using the LambdaTest Capabilities Generator, and the username and access key are added to helpers/utils.py.

Step 2: Since the test URL has dynamic content, scrolling vertically to the bottom of the page (and starting) ensures that all the required assets are available.

document.body.scrollHeight returns the total height of the page content. To allow the scrolling to complete and give the page content enough time to load, a blocking sleep of 2 seconds (i.e., time. sleep (2)) is added.

Lastly, window.scrollTo(0, 0) scrolls to the start of the page and a sleep of 2 seconds ensures that any UI changes triggered by scrolling are complete.

*Step 3: **Now that the page is loaded, the Canvas element is located using the ID locator in Selenium (i.e., *themes-cart). The presence_of_element_located ExpectedCondition in Selenium is added to check if the Canvas element is present in the DOM.

The presence is checked with a WebDriverWait of 30 seconds. If the element is not located within this time, an exception is raised, and the test is considered failed.

*Step 4: **Akin to using Cypress for Canvas automation, the Canvas properties are extracted with the *getBoundingClientRect() method in JavaScript.

Here, the JavaScriptExecutor in Selenium is leveraged with the *execute_script *method to execute JS code directly in the browser’s context. The implementation of this can be found in utils.py.

*Step 5: **Once the Canvas properties are derived, the center (X & Y) of the Canvas element is deduced by halving the display size of the * element on the web page (i.e., 946 * 441 pixels). The X & Y coordinates offset is set to 100, we will touch upon the reasons in the further section of this blog.

**Step 6: **To compute the month-on-month sales data, we first need to hover over the corresponding bar (for the respective month) and then read the tooltip. For this, the absolute X, Y value pair is read using the Mouse Coordinates Chrome extension.

As seen above, hovering over (1230, 389) should provide the sales data for December. On similar lines, hovering over (1130, 389) should provide the sales data for November. This means that the X offset can be set to 100 pixels. The coordinate value of the Y-axis can be set to Canvas center height (i.e. 221 +- 100 pixels). The logic mentioned for this test needs changes if the data is read from a pie chart or some other form of representation.

Since we need to find sales data for 12 months (January ~ December), a descending For loop from (12:0) is executed in the code. The move_to_element_with_offset() method which is a part of the Actions Class in Selenium, helps in moving to the respective X, Y pair in the Canvas.

The video below delves into the essential fundamentals of the move_to_element() method, including how to click on a specific area of an element.

Post the movement of the mouse pointer to a specific position relative to the center of the element, a click operation is simulated at the current position.

**Step 7: **The sales data for the corresponding month are displayed as tooltip text on every bar. In Selenium, the tooltip element (inside the Canvas element) is located using the Class Name locator.

Next, the visible text content of the tooltip_elem is printed on the console using print(tooltip_elem.text).

After executing the descending For loop (from 1 to 12), the sales data for all 12 months should be printed on the terminal.

Execution

First up, export the environment variables LT_USERNAME and LT_ACCESS_KEY on the terminal.

export LT_USERNAME=LT_USERNAME

export LT_ACCESS_KEY=LT_ACCESS_KEY

You can get these details from the profile section on LambdaTest. In case you have not installed the dependencies, you can do the same by triggering the command make install from the root folder of the project.

Run the command make cloud-canvas-automation-python on the terminal, post which the tests would be executed on the LambdaTest grid and sales data is printed on the terminal.

Like before, you can also check the test execution status by visiting the LambdaTest Automation Dashboard.

Many more Canvas element scenarios can be automated using Selenium/Cypress, but covering all of them is beyond the scope of this blog.

Bonus: Automating Tasks Using PyAutoGUI

Until now, we have used Selenium and Cypress to automate interactions with the Canvas element on a webpage or document. Though the above-demonstrated tests can be executed seamlessly on local and LambdaTest cloud grids, the PyAutoGUI module can also be used to automate interactions on local machines.

PyAutoGUI is a cross-platform Python module for GUI automation. It is designed to programmatically control the mouse and keyboard. To install it, trigger pip3 install pyautogui (or pip install pyautogui) from the terminal.

As stated in the official documentation, the x, y coordinates used by PyAutoGUI have the (0, 0) origin coordinates that start from the top left corner of the screen. On a screen that is 1920 * 1080 pixels in size, coordinates (0, 0) are for the top left while (1919, 1079) is for the bottom right.

It is important to note that PyAutoGUI interacts with the GUI directly by simulating mouse and keyboard events. Understandably, PyAutoGUI tests might fail or produce unexpected results if the window is switched while the execution is in progress.

For demonstration, we have automated LambdaTest Bug Smasher on Chrome (v131.0.6778.205) *installed on *macOS (Sequoia 15.2). Like before, the viewport size is set to (1024 * 768). The coordinates of the Play Now button and logic associated with the random generation of coordinates are similar to the Cypress Canvas Automation demo discussed in the earlier section of this blog.

The entire implementation is available in canvas_autogui.py.

# Inspiration - https://www.youtube.com/watch?v=lfk_T6VKhTE


import pyautogui
import unittest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium import webdriver
import time
from selenium import webdriver
import unittest
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.remote.webelement import WebElement
from helpers.utils import get_canvas_properties, show_click_coordinates, get_random_coordinates
# This is for the variables
from helpers.utils import *


class TestCanvasGraphAutomation(unittest.TestCase):
   def setUp(self):
       # Initialize the remote WebDriver session
       self.driver = webdriver.Chrome()
       self.driver.set_page_load_timeout(iWaitTime)
       self.driver.set_window_size(1024, 768)
       self.driver.maximize_window()
       self.driver.get(home_page_url_2)


       # Wait until the page is fully loaded
       WebDriverWait(self.driver, iWaitTime).until(lambda d:
               d.execute_script("return document.readyState") == "complete")


   def test_canvas_automation(self):
       driver = self.driver
       try:
           # Locate the graph
           canvas_elem = WebDriverWait(driver, iFrameWaitTime).until(
               EC.presence_of_element_located((By.ID, "unity-canvas"))
           )
           print("Canvas Element found")
           # Scroll to the element
           driver.execute_script("arguments[0].scrollIntoView({behavior: 'smooth'});", canvas_elem)
           time.sleep(iWaitTime)
       except Exception as e:
           print("Element not found:", e)
           status = "failed"
           self.update_lambdatest_status(status=status)


       # Get the canvas properties
       canvas_properties = get_canvas_properties(driver=driver, canvas_elem=canvas_elem)
       # Extracting each property from the returned dictionary for printing or usage
       canvas_left = int(canvas_properties["left"])
       canvas_x = int(canvas_properties["x"])
       canvas_y = int(canvas_properties["y"])
       canvas_top = int(canvas_properties["top"])
       canvas_width = int(canvas_properties["width"])
       canvas_height = int(canvas_properties["height"])
       canvas_right = int(canvas_properties["right"])
       canvas_bottom = int(canvas_properties["bottom"])


       # Print retrieved properties
       print(f"Canvas width: {canvas_width}")
       print(f"Canvas height: {canvas_height}")
       print(f"Canvas top: {canvas_top}")
       print(f"Canvas left: {canvas_left}")
       print(f"Canvas X: {canvas_x}")
       print(f"Canvas Y: {canvas_y}")
       print(f"Canvas right: {canvas_right}")
       print(f"Canvas bottom: {canvas_bottom}")


       time.sleep(iWaitTime)


       # Calculate the center coordinates of the canvas
       canvas_center_x = canvas_width / 2
       canvas_center_y = canvas_height / 2


       print(f"Canvas center width: {canvas_center_x}")
       print(f"Canvas center height: {canvas_center_y}")


       # Coordinates for the button within the canvas (substitute with actual button coordinates)
       button_x_in_canvas = 600  # example x position within canvas
       button_y_in_canvas = 620  # example y position within canvas


       # Calculate the absolute coordinates for the button
       absolute_x = canvas_x + button_x_in_canvas
       absolute_y = canvas_y + button_y_in_canvas


       show_click_coordinates(self.driver, canvas_elem, absolute_x, absolute_y)


       # Perform the click with PyAutoGUI at the calculated coordinates
       pyautogui.click(absolute_x, absolute_y)


       # Perform 60 random clicks inside the canvas
       for i in range(60):
           random_x, random_y = get_random_coordinates(canvas_properties, canvas_width,
                   canvas_height, canvas_center_x, canvas_center_y)

           # Log the coordinates to verify
           print(f"Clicking at X: {random_x}, Y: {random_y}")

           # Move to the coordinates and click using PyAutoGUI
           pyautogui.moveTo(random_x, random_y)
           show_click_coordinates(self.driver, canvas_elem, random_x, random_y)
           pyautogui.click()


           # Add a delay to see the clicks happen in real-time
           time.sleep(0.5)  # Adjust delay as needed


       print("Canvas Game Completed")


       status = "passed"


       # Update test status
       self.update_test_status(status=status)


       time.sleep(2)


   def update_test_status(self, status):
       self.driver.quit()


# Run the test
if __name__ == "__main__":
   unittest.main()

The only difference is the use of the pyautogui.click() method, which moves to the X and Y coordinates and clicks the left mouse button.

Execution

Run the command make local-canvas-automation-python on the terminal. The Chrome browser will then be instantiated, and the PyAutoGUI module will automate gameplay interactions.

The Python tests showcased as a part of this blog can be easily ported to make it work with the pytest framework.

Challenges in Automating Canvas Interactions

The element differs a lot from traditional HTML elements, primarily in how content within the Canvas is laid out and accessed. Unlike HTML elements that are a part of the DOM, Canvas content is outside the DOM structure.

Here are some of the major challenges when automating Canvas elements with frameworks like Selenium/Cypress:

Reliance on Pixel-Based Automation

While test automation frameworks like Selenium and Cypress rely on locator strategies and built-in APIs to realize element interactions, the automation of the Canvas element combines coordinate-based actions with the use of JavaScript APIs.

For example, we can automate actions on LambdaTest E-Commerce Playground by locating elements and using appropriate Selenium WebDriver APIs. The same can also be achieved with the help of the Cypress framework.

In case of a Canvas element, you first need to locate the Canvas element using the best-suited locators. Post that, move to the respective coordinates (or at an offset from the Canvas) and then perform respective actions (e.g., clicks, send keys, etc.) using built-in framework APIs or JavaScript injection.

As stated earlier, Canvas automation can be flaky because it relies on pixel-based rendering rather than a DOM-based structure.

Scaling, Zoom, and ViewPort Dependencies

Automation tests with Selenium can become flaky if the scaling, viewport size, and zoom levels are not set to constant values across tests. For instance, if the zoom level is changed from 100% to 200%, an ElementNotInteracable exception or an element not in the viewport may occur.

These pointers are valid, but you also need to ensure that the automation code can adapt to changes in viewport size, browser zoom level, and Device Pixel Ratio (DPR).

Shown below is the browser snapshot that shows the change in the X & Y coordinates of the “Play Now” button once the zoom level is set to 200%

Canvas automation code is more vulnerable to these variable factors than DOM-based Selenium tests, as element interactions are based on pixel positions within the Canvas.

Cross Browser Differences

The element is compatible with widely-used browsers — Chrome, Firefox, Safari, and Edge. Since every browser uses its rendering engine, Canvas scaling and rendering will differ based on browser zoom levels, viewport settings, and devicePixelRatio.

The underlying rendering engine of browsers can impact the layout and rendering of Canvas elements. This is because the implementation of the HTML5 Canvas API can differ from one engine to another.

In summary, subtle differences in the visual output can make tests that automate interactions with the Canvas elements flaky.

Complex Element Interactions

As elements in the Canvas are not a part of the DOM, interacting with frequently used elements like text boxes, buttons, sliders, etc., becomes a huge challenge. Operations like scrolling, moving by an offset, drag & drops, mouse actions etc., require a JavaScript-based approach or usage of Actions Class in Selenium.

Example — Entering personal information in text-boxes of the LambdaTest Bug Smasher involves locating the elements using move_to_element_with_offset() method (in Selenium) and respective its co-ordinates. This approach can be more cumbersome if there are more text-boxes in the Canvas 🙁

Over & above, you might need to put significant effort into finding coordinate offset if you have to test interactions across different browsers, devices, and OS combinations!

Handling Dynamic Elements

Selenium Wait comes in handy when you are automating websites that have dynamic elements (or dynamic content). It helps in improving test reliability and addresses timing issues that arise due to factors like network throttling, WebElement visibility, and more.

However, dynamic content in Canvas that involves gestures, drawings, or animations cannot be automated in the way it is done in Selenium. Content in a element is a single graphics block, owing to which it is difficult to predict when the said element will appear in the Canvas, even in non-throttling (or stable) conditions!

Over & above, Canvas content does not have a layered (or hierarchical structure) like the Document Object Model (DOM). Layers (or z-index-style ordering) must be simulated programmatically.

Example — Selenium/Cypress is not extensively used for game automation (that contains element). However, we took up the LambdaTest BugSmasher example to showcase the potential challenges that come with automating dynamic content in Canvas.

As seen above, it is difficult to predict the presence of bugs placed at random locations in the Canvas. In such cases, the best possible solution is to randomize the X and Y coordinate pairs so that the click falls within the Canvas.

Other issues associated with automated testing of Canvas elements include accessibility issues, the need for image-based verification, and limited debugging capabilities.

Conclusion

Unlike DOM-based automation, automating Canvas elements can be challenging due to their reliance on pixel-based graphics. Test automation frameworks like Selenium, Cypress, Playwright, etc., can be leveraged to automate interactions with Canvas elements on a web page.

It is essential to adhere to Selenium best practices to minimize test flakiness and ensure consistency in test execution when automating Canvas elements. The learnings of this blog can help you get started with using Selenium and Cypress for Canvas automation — a choice that you should make based on the project & usecase requirements.

Happy Testing!

16 Best Practices Of CI/CD Pipelines To Follow In 2024

himanshuseth004 — Tue, 02 Apr 2024 06:21:31 +0000

Every software project involves some kind of ‘processes’ & ‘practices’ for successful execution & deployment of the project. As the size & scale of the project increases, the degree of complications also increases in an exponential manner. The leadership team should make every possible effort to develop, test, and release the software in a manner so that the release is done in an incremental manner thereby having minimal (or no) impact on the software already available with the customer.

In this article, I will learn the best practices of CI/CD pipelines with respect to test automation to help you pace up your go-to market launch.

We have already covered CI/CD in one of our previous article on What is Continuous Integrations and Continuous Delivery? Where we discussed what they are about? Tools of trade involved in the CI/ CD pipeline. Every bug that is uncovered during the testing/verification stage goes through the rigorous process of development, integration, testing & closure. In case this activity is done manually, it could cost a significant amount of man-hours and verification effort, hence it is ideal to have ‘test automation’ in CI/CD.

Run your Playwright automatuion test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud.

‘Deployment Pipeline’ & Role Of Automated Testing in CI/CD

An automated system, called as Deployment Pipeline in CI/CD does the job of automating the testing of the incremental builds that are available on the server. Since the entire process is automated, the overall Turn-around time (TAT) would be significantly lesser when compared to manual testing.

In most of the scenarios, it is not possible to completely automate the testing. There could be some test scenarios where there is manual intervention required or scenarios where manual observation is required to decide whether the test has passed or not. Though automation is an integral best practice for CI/CD pipeline, identifying test scenarios that would fetch better results if they are automated is considered a pivotal best practice for CI/CD.

Though there are several benefits of using automation testing, some of the key benefits of using test automation in CI/CD pipeline are below:

Faster bug closure — Issue Detection > Issue Fix > Issue Closure.
Effective utilization of overall resources in hand i.e. testers, testing infrastructure, etc.
Ability to execute tests in parallel.
Consistency in test planning & execution.
Minimal requirement of technical skills required for automated test-case execution.

How To Make The Best Out Of Test Automation In CI/CD Pipeline?

While the scope of test automation in CI/CD pipeline may vary from one project to another, there are certain best practices for CI/CD that can be applied to any project, irrespective of its scale & size.

Incremental Changes & Timely Communication

Developers can follow a big-bang approach to develop a new feature or fix an issue reported by the test team. This means that the developer will use the option where he will push the feature implementation at one shot. Though the implementation job is done, there are issues with this approach. The major drawback is that it becomes extremely difficult to isolate an issue (if there is a problem with the implementation

A wiser approach would be to break down the feature into different sub-features and make use of unique feature flags for each feature. This technique not only helps in isolating potential issues but can be instrumental in making incremental feature-builds whenever the need arises. It also reduces the probability of having integration problems when the final feature (which is a combination of many sub-features) is pushed to the main-line/production branch.

There could be scenarios where there are inter-dependencies between features i.e. feature ‘A’ is dependent on feature ‘B’, in which case either developer has to wait for 100% completion of the feature on which there is a dependency. By making proper use of stubs & feature flags, both the feature developers can avoid the deadlock situation since stubs would be used for implementation which is planned/under progress. Once the required feature is ready, the developer has to get rid of stub-based/dummy implementation which was only a placeholder for implementation of a known interface.

This development activity requires careful planning and timely interaction between the development teams to make the most out of test automation in CI/CD pipeline. Any kind of indiscipline in following this approach could impact your overall test schedule.

Execute your playwright automated testing scripts instantly across over 50 browser and operating system combinations using the LambdaTest cloud platform.

Identification Of Tests That Can Be Automated

As mentioned earlier, it is unlikely that 100% of the tests can be automated since there would at least be some tests where manual testing would be more effective when compared to automation tests. Since test automation is core to CI/CD pipeline, realizing those test cases which can be automated is a crucial best practice for CI/CD.

Two broad categories of tests that can be automated are:

Tests that are executed on a frequent basis: If such tests are executed ‘manually’ by testers, it may be prone to errors since the productivity may reduce as the testers have to execute the same test multiple times in a day. Take the case of a web product that has to be tested for browser compatibility testing. Some test-cases may involve capturing the screenshot of your web-app while it is being tested on different combinations of browsers/devices/operating systems. Taking a screenshot for each of these combinations could be a tedious task. Hence, automated cross browser testing could free your testers for writing effective test cases.

Tests that require knowledge & have the dependency on specific set of testers: Dependency on resources (developers/testers) that only have the domain knowledge required for test execution can be risky if that resource is not available during a critical phase of the project. As only that tester is aware of the pre-requisites and procedure for testing, his absence can impact the overall project deliverables. Such situations can be avoided by incorporating test automation in CI/CD pipeline, so that project deadlines are not adversely affected

There could be many other scenarios where automation testing can be used and the intent should be to make use of tools & test platforms (which are scalable) that can help you to achieve that audacious goal.

Instantly run your playwright browser testing scripts on over 50 browser and operating system combinations using the LambdaTest cloud platform.

One-Click Migration

The effort to move the code changes to the production environment can be greatly reduced if there is a one-click feature for migrating the code from one application environment to another.

A well-architected CI/CD pipeline should have one-click migration since it reduces the friction (in code migration) between different operations. Opting for good cloud infrastructure that provides this feature and efficient & elegant usage of test automation could optimize the development & operation process. Pushing your development through a single click is great to aim as a best practice for CI/CD.

Exploiting Parallel Testing As A Best Practice For CI/CD Pipeline

Another best practice for CI/CD would be the parallel test execution. Once you have identified the tests that need to be automated, the next step should be to incorporate the factor of ‘parallel execution’ in your test approach. Having automated testing as a best practice for CI/CD pipeline already accelerates the entire process but the results would be much better if it is coupled with Parallel testing. You can have number of automation tests being executed, simultaneously, which can yield results much faster.

You cannot get the best throughput out of parallel testing if the tests are executed on one single machine. Such a scenario would hog the critical resources on the machine e.g. CPU, GPU, etc. which may slow down the execution of the other tests running on the machine.

Hence, the infrastructure on which the tests are executed matter a lot. For testing a web-app/website, having an in-house infrastructure for test deployment & execution might not be an ideal solution (in terms of cost & scalability). This is where LambdaTest comes in to help you perform parallel testing with automated testing frameworks such as TestNG, pytest and so on, over an on-cloud online Selenium Grid.

LambdaTest is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale with over 3000+ real devices, browsers and OS combinations.

Debugging websites for Safari before pushing them live is crucial. In this article, learn how to debug websites using dev tools in Safari.

Learnings From Previously Executed Projects

Every software project has different phases namely — project planning, requirement gathering, implementation, testing, product deployment, etc. There is learning involved at every phase and these learnings can be used for better planning & implementation of the next project. Even if there is a difference in the nature of the projects, you can still make use of some best practices from the past projects so that you can accelerate every phase of the current project. Also, to avoid repeating the mistakes that were committed in other projects.

You should make a note about the test automation techniques being used for accelerating the process as a best practice to CI/CD. You should involve your team members i.e. developers, testers to look into a possibility where best practices for test automation can be reused so that you & your team do not have to reinvent the wheel. For example, there could be certain test frameworks that were used by them which helped me achieve better test results in a shorter amount of time. Document these learnings as it may help in devising a sound test management strategy.

Why Documentation Is An Absolute Necessity?

There are cases where project requirements change/evolve along with the course of project execution. On similar lines, the test automation strategy should be devised in such a manner where you plan keeping the short-term goals & long-term goals in account.

Though there may be changes to the test plan or test strategy over a period of time, the team should at least standardize certain processes. Standardizing could mean short-listing a particular test framework, identifying the cloud infrastructure that suits your budget & requirements, building a competent automation team that work on test scripts (in Python/C#/Java/other programming languages). You should also have a backup plan (Plan-B) in case there are any changes in the schedule or overall business within the organization.

It is important to have these things documented so that it can be referred at any point in time. Along with the pointers that have been mentioned above, the document should also include a section which highlights the ‘Risks & Assumptions’ associated in the execution of the test strategy.

For example, the test plan/test strategy would have been created with 4 automation engineers as the resource count; but you may need to scale down the team due to some unforeseen circumstances. Hence, create a future-proof test strategy by looking at all different parameters associated with the project.

The document highlighting the test strategy should be a free-flowing document i.e. updated with important timelines & milestones and should be version-controlled so that revisit the document to track the progress.

Inspect web elements to help developers and testers to debug UI flaws or make modifications in HTML or CSS files. Learn how to inspect on mac.

Central Repository For Code Development & Maintenance

In any project, there would be number of developers in the team who will push their code which could be a feature implementation or a bug-fix. On the same lines, developers would be executing a pull request to get the latest code changes from the server. Maintaining the source code on central repository is of utmost importance & is considered one of the best practices for CI/CD pipeline. So that the developers can keep their changes up-to-date with the latest source code available on the production server.

A revision/version control system is also important to track changes, identify differences, and maintaining an environment that eases the task to keep track of the application builds.

Rollback With Version Control

There are scenarios where the test team could come across some issues which were not observed in the previous software release; a probable reason could be a side-effect of a fix that is pushed in the release software which is under test. Performing RCA(Root Cause Analysis) could sometimes be time consuming, and you can’t afford to lose a valuable feature for a long time in your production environment.

In such cases, the developer who pushed that fix should be able to roll-back his changes so that the release is not stalled and he also gets some more time to re-look at his implementation. Without version control system, such a seamless roll-back is not possible. The roll-back is not limited to source code; it can be extended to documents, presentations, flow diagrams, etc.

Staging Environment Loosely Mimicking The Production Environment

Irrespective of the version-control tool being used for tracking code changes, usage of development & testing environments is common in all of them. The development team can make use of different ‘development branches’ for a different set of customers, but the code would still be pushed to the Production server/Staging Server. For improved effectiveness, the staging environment should ideally mirror the production environment.

A common mistake I have observed is related to live traffic. Often Staging environment misses out on live traffic that your production environment has to go through for handling the load. there are many reasons that for staging environment to be identify some of the reasons why your staging environment is failing.

This approach makes it easy for deploying working code from staging server to production server. In fact, developers should also have the flexibility where they can create & setup new environments on the click of a button. There are tools like Jenkins which can help to achieve the same. Usage of tools common to the development team & DevOps team would be vital in streamlining the best practices of CI/CD process.

Perform manual or automated cross browser test on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.

Involving Relevant Stakeholders In Test Code Development

It becomes extremely critical to involve the right stakeholders in the test automation planning, development & execution. Since developers in the team can add more value to the test code that is implemented by the test engineers, it would be ideal to involve them in the test case implementation. Developers have a better understanding of the architecture, coding techniques, best practices in software development.

Experienced QA engineers may have a good understanding of test infrastructure, test frameworks, etc. Hence, developers collaborating with the QA engineers can reduce the effort & time involved in test case development to speed up test automation for CI/CD pipeline.

In crunch situations, the development team can work on the automation code without involving the test team so that there is no delay in the implementation of automation tests. However, it is advisable to involve the relevant stakeholders, especially QA engineers & developers for the test case implementation.

Incorporate Feedback For A Robust Automated Testing Strategy In CI/CD Pipeline

Test strategy document charts a fair plan on how the test automation & other test-related activities would be planned & executed. Along with updating the test strategy (as and when it is required), the feedback loop should also be used for timely updation of code for test automation in CI/CD pipeline.

The feedback can be used to understand the user’s pain-points & to get finer details about the overall usage of the infrastructure that was provided for automation testing. For example, test automation engineers & DevOps team might have some observations about the infrastructure over a brief period of testing. The observations could be related to methodologies used for capturing logs/porting automation test code implemented in Python & Selenium to the Cloud infrastructure used for testing/performance related to the execution of tests, etc.

All this feedback should be captured in a document and relevant feedback should be incorporated as a best practice to CI/CD automation pipeline, so that the test code is in-sync with the current requirements.

Explore the top UI automation testing tools, learn what is automation UI testing, the challenges in UI testing, and discover effective solutions in this guide.

Frequent Code Commits For Micro-Agility In Test Automation For CI/CD Pipeline

Developers begin the development based on the requirements mentioned in the specifications. Once the implementation is complete, the developer performs a unit test on the code and fixes the issues encountered during this round of testing. He should be able to fix issues that are independent of integration since the tests are stand-alone tests. Once the local testing is complete, the developer will push the code to a code repository. In most of the development environments, the code is normally pushed to a ‘development branch’ and once that is approved & tested, it can be pushed to the ‘production branch’.

Hence, developers should be encouraged & motivated to push the code changes more frequently so that it becomes easy for keeping a track of the changes. This important best practice for CI/CD should be followed diligently by the developers in the team so that you are able to achieve micro-agility for activities related to development & test automation in CI/CD pipeline.

Seamless Coordination! Remember, it is CI + CD!

CI & CD are two separate processes but they cannot be termed as inseparable. Any delay or lapse in executing the CI process could hamper the output of the CD process. Though automation can be used in improving the efficiency of the CI/CD process, there are many aspects where automation may not be effective.

Communication & Collaboration are key pillars if we refer to best practices for CI/CD process since there are multiple teams — product planning, development team, verification team, DevOps team, etc. that have to work in harmony for the success of the project. Hence, benchmarking your CI/CD process with the leaders who are best in those areas is important. And is considered as a critical best practices for CI/CD pipeline to provide keen inputs and suggestions for optimization.

Also, remember that in any project, there is no activity that can happen in silo since there would always be someone who is dependent on the results of your activity. For this to happen, there needs to be proper communication between stakeholders of the project. For example, your QA engineers might be working on some test case implementation which not be covering all the requirements. If such tests are executed, you may not achieve good test coverage since important scenarios are missed out in the test case/test suite implementation.

Discover the leading ui automation testing tools, unravel the essence of UI testing automation, tackle the challenges it presents, and find pragmatic solutions — all in one comprehensive guide.

Keep It Simple & Organized By Executing The Smaller Test Cases First!

I have witnessed in many projects that when it comes to testing automation for CI/CD pipeline, we often forget to prioritize our test case in a systematic approach. Here is what I mean! As a best practice of CI/CD, it is always recommended to execute your smaller and simple test cases before your long and complex ones.

This way you could be sure of individual test case coverage and performance with respect to functionality testing in an isolated manner. Complex test cases where you design test cases to check the interaction between multiple modules can come later!

Transparency Within The Team & Across The Teams

Many projects have development & QA teams that are located in different regions. Apart from intense coordination that is required to make sure that every team member is in-sync, better transparency can make things even better. This is where CI can be very effective since it brings the much-needed level of transparency within the key stakeholders in the team.

With CI in place, the team gets a much better idea about the overall status of the tests and what can be done to improve the efficiency of the tests. This is how it fuels the usage of collective intelligence for the betterment of the team & project. It is imperative to have everyone working on the same page, especially if you are working remotely. Project management tools could be highly effective as a best practice for CI/CD process.

Using project management tools everyone would vary of the activities performed by other team members, also the deadline by which a task has to be completed. Here are some of the collaboration tools for your software testing team.

This article is intended for learners, innovators & entrepreneurs who want to learn automation testing life cycle to enhance the quality of software products.

Choosing The Right Tool for CI/CD Process

All the above-mentioned tips and actionable insights would help you pace up your test automation using best practices for CI/CD pipeline. Although, in the end, pacing CI/CD pipeline is highly tool dependent. There is a number of tools available for CI/CD, but you should choose the right tool based on your budget, requirements, and experience. Some of the commonly used CI/CD tools are Jenkins, Travis CI, Gitlab, TeamCity, Codeship, Circle CI, etc.

Before zeroing on any particular tool, we highly recommend that you look at the pros & cons of the tool as any change in the CI tool during the course of development could hamper your deliverables & deadlines.

CI/CD Tools To Integrate With Online Selenium Grid at LambdaTest

Talking about CI/CD tools, here is a bonus tip, LambdaTest offers a Selenium grid which is compatible with every CI/CD tool that you may be using, so you could fasten your cross browser testing effort.

To learn more about the various CI/CD tools follow this guide on best CI/CD tools that will provide you valuable information on selecting the best tool to make your development and testing process better.

Conclusion

Test automation is an integral part of the overall test strategy, but it has to be planned & executed in a careful manner. There are many aspects of test automation (particularly related to infrastructure) where you can smartly use resources in hand without investing in in-house testing infrastructure. Cloud-based testing could simplify your overall test automation strategy due to the reliability & scalability aspects. These enhancements not only motivate the team members, but also let you get the best out of the best practices for CI/CD pipeline.

Top 28 Selenium WebDriver Commands in NUnit For Test Automation

himanshuseth004 — Tue, 02 Apr 2024 06:17:58 +0000

Selenium Framework interacts with the web browser via the Selenium WebDriver commands. It does so with the help of certain Selenium WebDriver commands to automate browser actions such as open, close or maximise the browser window. Also, you can handle different WebElements or drop down elements browser to perform Selenium test automation.

Different programming languages such as Python, Java,C# etc uses an interface to interact with the browser. In this Nunit tutorial, I’ll be exploring Selenium commands for NUnit, which is a Selenium test automation framework for C# , the interface used through which the browser is controlled is the IWebDriver.

In this NUnit tutorial on Selenium WebDriver Commands in NUnit, I’ll take deep dive into various Selenium WebDriver Commands for web browsers, browser elements & drop down. In case you’re not familiar with ‘what is Selenium?’, you can refer to our detailed page on the topic on Selenium 4 that covers all the aspects on what features has been improvised and what functions are deprecated.

Get faster loading times and better user experience with our efficient JSON Stringify tool. Quickly compress your JSON data with ease and optimize your website now.

What are Selenium Webdriver Commands?

Selenium Webdriver commands are the methods used to run your Selenium test automation scripts. You can use these browser commands to automate different browser actions to perform testing.

Selenium WebDriver commands in NUnit are divided in three different categories on the basis of different kinds of browser interactions. The commands are categorized based on the type of interaction and the element/application on which action is being performed. Automated browser testing involves the following Selenium commands:

*Web Browser Commands *— Performs actions on the web browser (e.g. open, close, maximize, etc.)
*Web Element Commands *— Performs actions on the WebElements in the current window (e.g. checking a button, entering text in a textbox, clicking a button, etc.)
**Drop Down Commands — **Performs actions on the drop-down elements in the current window (e.g. selecting or deselecting a value from drop-down window).

Web Browser Commands

When C# is used along with the Selenium testing framework , the IWebDriver interface is used to perform actions on the web browser. To access the methods of the IWebDriver interface, an instance/driver object from IWebDriver should be created. The complete list of methods for IWebDriver comes up as soon as you press the dot key.

Below are the Selenium WebDriver Commands in Nunit for handling browsers:

1. Url{}

Using this Selenium WebDriver command you can Get or Set the URL/web page that needs to be displayed.

Syntax:

string IWebDriver.Url { get; set;}

Example

/* Selenium Webdriver command for URL*/
String URL;


driver = new ChromeDriver();
/* Set Operation */
driver.Url = "https://www.lambdatest.com";
/* Get Operation */
URL = driver.Url;

2. Title{}

This Selenium WebDriver command gets the title of the current browser window.

Syntax:

string IWebDriver.Title{get;}

Example

/* Selenium Webdriver command for getting title */
String page_title;
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
page_title = driver.Title;

3. PageSource{}

You can get the source of the page that is loaded by the web browser with this Selenium WebDriver command.

Syntax:

string IWebDriver.PageSource{get;}

Example

/* Selenium Webdriver command for getting page source*/
String page_source;
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
page_source = driver.PageSource;

4. Quit()

You can quit the driver and close every browser window associated with this Selenium WebDriver command in NUnit.

Syntax:

void IWebDriver.Quit()

Example

/* Selenium Webdriver command for URL*/
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);
/* Quit the window for this NUnit tutorial*/
driver.Quit();

5. Close()

With close() Selenium WebDriver command, you can close the current window, quit the browser in case if it is the last window open. In case you want more detailed information on how to handle browser windows, you can refer to our blog.

Syntax:

void IWebDriver.Close()

Example

/* Selenium Webdriver command for Closing window*/
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
driver.Close();

6. Navigate()

With this Selenium WebDriver command in NUnit you can navigate the browser to another location i.e. Refresh the current window/Go Back to the previous window/Go to the next page as per browsing history/Go to a particular URL.

Syntax:

INavigation IWebDriver.Navigate()

Shown below are the different options available with the Navigate() command:

Back()

Move back a single entry as per the browser’s history.

Syntax:

void INavigation.Back()

Example:

driver.Navigate().Back();

Forward()

Move a single item forward as per the browser’s history

Syntax:

void INavigation.Forward()

Example:

driver.Navigate().Forward();

GoToUrl()

Navigate to a particular URL which is passed as a parameter to the Navigate() Selenium test automation command

Syntax:

void INavigation.GoToUrl(string url)

Example:

driver.Navigate().GoToUrl(“https://www.lambdatest.com")

Refresh()

Refresh the current browser window

Syntax:

void INavigation.Refresh()

Example:

driver.Navigate().Refresh();

Online CSS to STYLUS converter to convert CSS to Stylus. Get clean, readable code instantly. Start converting today!

Web Element Commands

While performing Selenium test automation with NUnit you’ll often have to rely on Selenium WebDriver command to perform operations on WebElements (e.g. textboxes, radio buttons, hyperlinks, etc.) on a page, that are triggered via the IWebElement interface.

To find the details of a WebElement e.g. *XPath*, outerHTML, etc.; you can make use of the Inspect Tool available in web browsers like Chrome, Firefox, etc. Once the WebElement is located, you can perform the corresponding operation on that element. To know more about how to access WebElements, you can refer to our detailed article on Selenium locators.

Shown below in this Nunit tutorial are the Selenium WebDriver command for WebElements.

To learn more about WebElements and how to interact with the elements, watch the complete video tutorials and get valuable.

To get started with your web automation journey you can Subscribe to the LambdaTest YouTube channel for details guidance on various automation testing tools, Selenium testing, Cypress testing, Playwright testing, and more.

For demonstrating the usage of the WebElement commands, we have used the the demo sites given below as for Menu system and HTML form example

Identify locators and perform seamless automation testing on the cloud platform Try LambdaTest Now!

1. Click

Using the Click() Selenium WebDriver command, you can click on a particular WebElement present on the web page. The Click operation can be performed on hyperlinks, buttons, checkboxes, or any other element that is clickable on the page. The element is first located on the page, after which the Click operation is performed.

Syntax:

void IWebElement.Click()

Example

/*Selenium Webdriver command for click*/
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id="navbarSupportedContent"]/ul/li[6]/a"));
web_element.Click();

2. Enabled

You can check whether a particular WebElement is enabled or not with the Enabled Selenium WebDriver command. It returns true if the WebElement on the page is enabled else it returns false.

Syntax:

Bool IWebElement.Enabled{get;}

Example

/*Selenium Webdriver command to check whether a particular web element is enabled */
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id="navbarSupportedContent"]/ul/li[6]/a"));
Boolean element_enabled = web_element.Enabled;

3. Displayed

This Selenium WebDriver command checks whether a particular WebElement is displayed or not. It returns true if the WebElement on the page is displayed else it returns false.

Syntax:

Bool IWebElement.Displayed{get;}

Example

/*Selenium Webdriver command to check whether a particular web element is displayed */
driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id="navbarSupportedContent"]/ul/li[6]/a"));
Boolean element_enabled = web_element.Displayed;

4. Clear

The Clear() Selenium WebDriver command clears the content in the WebElement present on the page. It is used for clearing the pre-loaded contents in a text box.

Syntax:

void IWebElement.Clear()

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Email address text box on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='useremail']");
web_element.Clear();

5. SendKeys

This Selenium Webdriver command Inputs the values in an element like a textbox on the web page.

Syntax:

void IWebElement.SendKeys(string text)

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Email address text box on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='useremail']");
web_element.SendKeys("test@email.com");

6. GetAttribute

There may be attributes and properties associated to WebElements present on a web page. These are added by the website developer. With GetAttribute() you get the value of a certain attribute as a string of the WebElement.

Syntax:

string IWebElement.GetAttribute(string attributename)

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Email address text box on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='navbarSupportedContent']/ul/li[6]/a"));
String titleValue = web_element.GetAttribute("class");

7. GetCssValue

Gets the value of a CSS property of a WebElement present on the web page. Color values are returned in the form of rgba string. For example, a “background-color” property set as “green” in the HTML source, will return “#008000” for its value.

Syntax:

string IWebElement.GetCssValue(string propertyname)

Example:

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='navbarSupportedContent']/ul/li[6]/a"));
/* returns #000000 */
String cssvalue = web_element.GetCssValue("background-color");

To get demonstrate the functionality of GetCssValue() we will be performing inspection on platform called LambdaTest. In this example we will get the background color of the ‘Login’ button on LambdaTest homepage, we check the properties associated with the element using Inspect tool.

As seen in the snapshot, background-color is the property associated with Login button. The same is used with GetCssValue().

LambdaTest is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale with over 3000+ real devices, browsers and OS combinations. This platform allows you to perform web and mobile automation without having to worry about maintain infrastructure, security of your test data and more.

8. Submit

Performs a click on a button which is of the type submit.

Syntax:

void IWebElement.Submit()

Example

driver = new ChromeDriver();
driver.Url = "https://accounts.lambdatest.com/login";
/* The Xpath of the Login Button on which is of the type submit */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='app']/section/form/div/div/button"));
web_element.Submit();

9. Text

Gets the innerText of a WebElement, without any leading or trailing whitespace & other whitespaces collapsed.

Syntax:

string IWebElement.Text{get;}

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='navbarSupportedContent']/ul/li[6]/a"));
String text_value = web_element.Text;

10. TagName

Gets the tag name of a WebElement on the web page.

Syntax:

string IWebElement.TagName{get;}

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* The Xpath of the Login Button on LambdaTest homepage */
IWebElement web_element = driver.FindElement(By.XPath("//*[@id='navbarSupportedContent']/ul/li[6]/a"));
String tag_name = web_element.TagName;

11. Selected

Checks whether a WebElement is selected or not. The WebElement can be radio button, checkbox, etc.

Syntax:

bool IWebElement.Selected{get;}

Example

driver = new ChromeDriver();
driver.Url = "https://lambdatest.github.io/sample-todo-app/";
IWebElement web_element = driver.FindElement(By.XPath("/html/body/div/div/div/ul/li[1]/input"));
bool selected_status = web_element.Selected;

12. Size

Gets the height & width associated with a WebElement or the current browser window. The return type is of type struct size.

Syntax:

Size IWebElement.Size{get;}

Example

driver = new ChromeDriver();
driver.Url = "https://www.lambdatest.com";
/* Get the window size */
Console.WriteLine(driver.Manage().Window.Size);

Drop Down Commands

Drop down elements are common in web pages, especially when a user is registering on a website and has to enter the country/city related information. In C#, drop down operations are performed using the SelectElement class. SelectElement is declared in using OpenQA.Selenium.Support.UI package which is imported before performing any operation on the drop down box.

For demonstrating the usage of the WebElement commands, we have used the test URLs Menu/a> and formex.

Below are drop down operations in C#:

1. SelectByIndex

Select a value based on the index value. The starting index in drop down is 0.

Syntax:

void SelectElement.SelectByIndex(int index)

Example

driver = new ChromeDriver();

driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";
IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.SelectByIndex(1);

2. DeselectByIndex

Deselect a selected value based on the index.

Syntax:

void SelectElement.DeselectByIndex(int index)

Example

driver = new ChromeDriver();

driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";
IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.DeselectByIndex(1);

3. SelectByText

Select an option based on the text of the options available in the drop down. There is an option to do partial matching of the text and by default partial matching is False.

Syntax:

void SelectElement.SelectByText(string text, [bool partialMatch = false])

Example

driver = new ChromeDriver();

driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";
IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.SelectByText("on IE6");

4. DeselectByText

Deselect an already selected option based on the text of the options available in the drop down.

Syntax:

void SelectElement.DeselectByText(string text)

Example

driver = new ChromeDriver();

driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";
IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.DeselectByText("on IE6");

5. SelectByValue

Select an option based on the value supplied as input.

Syntax:

void SelectElement.SelectByValue(string value)

Example

driver = new ChromeDriver();

driver.Url = "http://www.tizag.com/phpT/examples/formex.php";

IWebElement element = driver.FindElement(By.XPath("//*[@id='examp']/form/select[1]"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.SelectByValue("HighSchool");

6. DeselectByValue

Deselect an already selected option based on the value supplied as input.

Syntax:

void SelectElement.DeselectByValue(string value)

Example

driver = new ChromeDriver();

driver.Url = "http://www.tizag.com/phpT/examples/formex.php";

IWebElement element = driver.FindElement(By.XPath("//*[@id='examp']/form/select[1]"));
SelectElement select_elem = new SelectElement(element);

/* Sleep for 4 seconds after page is displayed */
System.Threading.Thread.Sleep(4000);

select_elem.DeselectByValue("HighSchool");

7. DeselectAll

Used to clear the selected options in multi select drop down menus.

Syntax:

void SelectElement.DeselectAll()

Example

driver = new ChromeDriver();
driver.Url = "http://www.example-site.com";
IWebElement element = driver.FindElement(By.XPath("x-path"));
SelectElement select_elem = new SelectElement(element);
select_elem.DeselectAll();

8. IsMultiple

This Selenium Webdriver command gets a value showing if the parent element supports multiple selections. If the drop down is multi select capable it returns true else otherwise it returns false.

Syntax:

bool SelectElement.IsMultiple{get;}

Example

driver = new ChromeDriver();

driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";
IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));

SelectElement select_elem = new SelectElement(element);
bool is_multi_select = select_elem.IsMultiple;
Console.WriteLine("Multi Select {0}", is_multi_select);

9. Options

You can get the list of options for the select element with this Selenium WebDriver command.

Syntax:

IList<IWebElement> SelectElement.Options{ get; }

Example

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Drawing;
using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support.UI;

namespace NUnitDemo
{
    class NUnit_Demo
    {
        IWebDriver driver;

        [Test]
        public void cssDemo()
        {
            driver = new ChromeDriver();
            driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";

            IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));

            SelectElement select_elem = new SelectElement(element);
            /* Sleep for 4 seconds after page is displayed */
            System.Threading.Thread.Sleep(4000);

            select_elem.SelectByText("on IE6");

            /* List will contain details of all the options */
            IList<IWebElement> avail_options = select_elem.Options;

            int ListSize = avail_options.Count;

            for (int loop_var = 0; loop_var < ListSize; loop_var++)
            {
                String text_value = select_elem.Options.ElementAt(loop_var).Text;
                System.Diagnostics.Debug.WriteLine("Selected item is " + text_value);
            }

        }

        driver.Close();
    }
}

10. AllSelectedOptions

Gets all of the selected options within the select element. It is similar to *Options *except that it should be used on a multi select drop down menu.

Syntax:

IList<IWebElement> AllSelectedOptions { get; }

Example

£
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Drawing;
using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support.UI;

namespace NUnitDemo
{
    class NUnit_Demo
    {
        IWebDriver driver;

        [Test]
        public void cssDemo()
        {
            driver = new ChromeDriver();
            driver.Url = "http://demos.dojotoolkit.org/dijit/tests/test_Menu.html";

            IWebElement element = driver.FindElement(By.XPath("//select[@aria-label='select']"));

            SelectElement select_elem = new SelectElement(element);
            /* Sleep for 4 seconds after page is displayed */
            System.Threading.Thread.Sleep(4000);

            select_elem.SelectByText("on IE6");

            /* List will contain details of all the options */
            IList<IWebElement> avail_options = select_elem.AllSelectedOptions;

            int ListSize = avail_options.Count;
            System.Diagnostics.Debug.WriteLine("List size is " + ListSize);

            for (int loop_var = 0; loop_var < ListSize; loop_var++)
            {
                String text_value = avail_options.ElementAt(loop_var).Text;
                System.Diagnostics.Debug.WriteLine("Selected item is " + text_value);
            }

        }
        driver.Close();
    }
}

Tired of manually creating JSON data? Generate random JSON data in seconds with our easy-to-use tool. Try random json generator now and make your development process a breeze!

It’s A Wrap!

The IWebDriver interface is the base on which the browser interactions for Selenium test automation happens. In this NUnit tutorial, I had a look at the most widely used Selenium WebDriver commands in Nunit for automated browser testing.

Using these Selenium WebDriver Tutorial commands in Nunit, you can interact with different types (and categories) of WebElements such as text boxes, drop-downs, radio buttons, and more. This forms the basis of automated browser testing with Selenium, C#, and NUnit framework.

I hope you found this NUnit tutorial informative, In case of any questions feel free to t reach out to us in the comment section down below. That’s all for now. Happy Testing!!! ?

Pyppeteer Tutorial: The Ultimate Guide to Using Puppeteer with Python

himanshuseth004 — Mon, 05 Feb 2024 07:56:26 +0000

Pyppeteer, a Python library used for web browser automation, is a valuable resource in the testing world. It serves as the unofficial counterpart to Puppeteer, a renowned JavaScript library. By leveraging Pyppeteer, users can manipulate web browsers, automate tasks, and extract data from websites using Python.

This Pyppeteer tutorial will walk you through the installation process and will cover all the major scenarios that can be automated with code examples.

So, let’s get started!

What is Pyppeteer?

Pyppeteer, a Python library, is an unofficial Python port of Puppeteer (a Node.js Chromium browser automation library). Pyppeteer APIs can be leveraged for automating interaction with web elements, scraping content from dynamic websites, handling iFrames, and more.

Though the last released version of Pyppeteer was 1.0.2, on Jan 11, 2022, the QA community still uses the library for web automation on the Chromium browser on the local machine (or cloud grid). Pyppeteer can be used with pytest and PyUnit (Python’s default unit testing framework).

**Note: **Please replace pip3 with pip depending on the pip version installed on your machine. Also, function and method are used interchangeably throughout the blog.

**Remote Test device Lab enables efficient software testing on various devices remotely. Click to explore and enhance your development process now!**

How to install Pyppeteer?

As stated in the Pyppeteer installation guide, Pyppeteer requires Python 3.6 (or above) installed on the machine. As a good practice, we would install Pyppeteer in a virtual environment (venv) to isolate it from the packages in the base environment.

When writing this blog, the latest version of Pyppeteer is 1.0.2.

Run the commands virtualenv venv and source venv/bin/activate on the terminal to create the virtual environment.

Now that the virtual environment is ready, let’s install Pyppeteer using either of the two ways mentioned below:

Run the command pip3 install pyppeteer (or pip install pyppeteer) on the terminal

As seen above, Pyppeteer (v 1.0.2) was successfully installed in the virtual environment (venv).

The latest version of Pyppeteer, i.e., 1.0.2, can also be installed by executing pip3 install -U git+https://github.com/pyppeteer/pyppeteer@dev on the terminal.

If Pyppeteer is run for the first time and no Chromium is in the machine, it downloads and installs the latest version.

Pyppeteer also lets you use a specified version of Chromium. The Default value can be checked using pyppeteer.chromium_revision, which is 588429 in our case.

As seen below, it downloaded & installed Chromium (v 71.0) on the machine.

In further sections of the blog, we will demonstrate using the $PYPPETEER_CHROMIUM_REVISION environment variable to use a certain Chromium version.

Now that the Pyppeteer setup is complete, let’s look at some prominent test scenarios (or use cases) that can be automated using Pyppeteer.

This article explains the emulator vs simulator vs real device differences, the learning of which can help you select the right mobile testing solution for your business.

Demonstration: Web automation with Pyppeteer

For demonstration of major test scenarios, we have used Pyppeteer in conjunction with the pytest framework. This choice is primarily due to support for pytest fixtures, test parameterization, and more.

Directory Structure

As seen in the project structure, the configuration and execution are driven via a Makefile. All the relevant test scenarios (or use cases) that demonstrate the usage of Pyppeteer APIs are separated into different folders.

Here is a closer look at the directory structure:

Configuration (or setup) files

The conftest.py file in pytest contains the implementation related to fixtures, hooks, and other configuration options used in the test code. Based on the value of the environment variable EXEC_PLATFORM, Pyppeteer tests will be executed on the local Chromium browser or on Chrome (which is built on Chromium) on a cloud grid like LambdaTest.

LambdaTest is an AI-powered test orchestration and execution platform that allows you to perform Puppeteer testing using Python on an online browser farm spanning 50+ browser versions on the cloud-based testing infrastructure, ensuring efficient automation testing using the Pyppeteer library.

With LambdaTest, you can also perform parallel testing at scale and accelerate software release cycles by multiple folds.

Fixture: Creation of a new browser instance

The scope of the pytest fixture (i.e., @pytest.fixture) is set to function. Hence, the fixture is set up and torn down before & after executing a test function (or method). If EXEC_PLATFORM is set to local, the Chromium browser on the local machine is instantiated using the launch() method in Pyppeteer.

The launch() method is a part of the pyppeteer.launcher module that is used to launch an instance of Chrome browser in headless mode (default). Since we intend to run the tests in non-headless mode, we set the headless parameter to False. The [‘–start-maximized’] argument starts the browser in a maximized window.

If EXEC_PLATFORM is set to cloud, the Chrome browser on the LambdaTest grid is instantiated using the connect() method in Pyppeteer. In the demonstration, we used the WebSocket endpoint (browserWSEndpoint) that points to wss://cdp.lambdatest.com/puppeteer. We have used the Endpoint from the Puppeteer sample on LambdaTest.

The capabilities (in dictionary format) generated using LambdaTest Capabilities Generator are passed as a query parameter to browserWSEndpoint. The dumps() *function of the *json module converts the capabilities into a JSON formatted string.

As seen below, the values of username and access_key are obtained from the environment variables LT_USERNAME and LT_ACCESS_KEY specified in the Makefile. Since we want to check out the execution, the headless capability is set to False.

Finally, yield is used for defining the teardown code (i.e., releasing browser resources) after the test execution is complete. In our case, we close the browser instance in the fixture responsible for opening a new Browser page.

Looking for an effective way to test on Safari browsers online? Skip the hassle of emulators and simulators. Experience authentic testing with LambdaTest’s real online Safari browsers. Start now!

Fixture: Creation of a new page

Next up, we have a Fixture of function scope primarily responsible for creating (or opening) a new page. The fixture takes the newly created browser instance as the input parameter.

The newPage() method of the BrowserContext class is invoked to open up a new web page. Since the viewport sizes differ when the tests are run on the local machine (i.e., MacBook Pro 13 inch) & cloud grid, the same is set using the setViewport() method of the page class. The required viewport width & height are passed in a dictionary format to the setViewport() method.

Finally, the resources used by the browser (created in the browser() fixture) and page(s) that are created in the page() fixture are released as a part of the teardown code.

pyproject.toml

[tool.poetry]
name = "Web automation with Pyppeteer"
version = "0.1.0"
description = ""
authors = ["Himanshu Jagdish Sheth <himanshu.sheth@gmail.com>"]


[tool.poetry.dependencies]
python = "^3.7.9"
flake8 = "^4.0.1"
autopep8 = "^1.6.0"
pytest-asyncio = "^0.21.0"


[tool.pytest.ini_options]
asyncio_mode = "auto"

All the project dependencies (i.e., flake8, autopep8, and pytest-asyncio) are under the [tool.poetry.dependencies] section. pytest-asyncio is a pytest plugin that provides support for coroutines as test functions. Awaits inside the test code are made possible with this plugin. The pytest asyncio is also instrumental in greatly reducing the test execution time!

In the [tool.pytest.ini_options] section, the asyncio mode is set to auto. This means that the asyncio mode will be automatically detected and enabled by pytest, depending on the presence of async fixtures (or tests).

requirements.txt

The requirements.txt contains all the packages and libraries required for execution.

pytest
pyppeteer
pytest-asyncio
nest_asyncio
pytest-xdist
pytest-order
py

The pytest-order plugin is used for ordering the execution of the tests. pytest parallel execution is performed for a couple of test scenarios. Hence, the pytest-xdist plugin is installed to realize the same.

All the dependencies and packages are installed by executing poetry install and pip3 install -r requirements.txt on the terminal.

Test native, hybrid, and web apps on any mobile OS with our free online Android emulator. Sign up to optimize app performance.

Makefile

As stated earlier, the execution is all driven using the Makefile. Depending on the Python and pip versions installed on your machine, you may change python3 & pip3 to python & pip, respectively.

# Define variables
PYTHON := python3
POETRY := poetry
PYTEST := pytest
PIP := pip3
PROJECT_NAME := web automation with Pyppeteer


.PHONY: install
install:
   $(POETRY) install
   @echo "Dependency installation complete"


   $(PIP) install -r requirements.txt
   @echo "Set env vars LT_USERNAME & LT_ACCESS_KEY"
   # Procure Username and AccessKey from https://accounts.lambdatest.com/security
   export LT_USERNAME=himansh
   export LT_ACCESS_KEY=Ia1MiqNfci


.PHONY: install
poetry-install:
   poetry install


.PHONY: test
test:
   export NODE_ENV = test


.PHONY: test
pyunit-pyppeteer:
   - echo $(EXEC_PLATFORM)
   - $(PYTHON) tests/pyunit-pyppeteer/test_pyunit_pyppeteer.py


.PHONY: test
pytest-pyppeteer:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s -n 2 tests/pytest-pyppeteer/test_pytest_pyppeteer_1.py \
   tests/pytest-pyppeteer/test_pytest_pyppeteer_2.py


.PHONY: test
pyunit-pyppeteer-browser-session:
   - echo $(EXEC_PLATFORM)
   - $(PYTHON) tests/starting-browser-session/pyunit/test_pyppeteer_browser_session.py


.PHONY: test
pytest-pyppeteer-browser-session:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s \
   tests/starting-browser-session/pytest/test_pyppeteer_browser_session.py


.PHONY: test
asyncio-run-pyppeteer-browser-session:
   - echo $(EXEC_PLATFORM)
   - $(PYTHON) tests/starting-browser-session/asyncio_run/test_pyppeteer_browser_session.py


.PHONY: test
asyncio-run-complete-pyppeteer-browser-session:
   - echo $(EXEC_PLATFORM)
   - $(PYTHON) tests/starting-browser-session/\
   asyncio_run_until_complete/test_pyppeteer_browser_session.py


.PHONY: test
pyppeteer-button-click:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/button-click/test_page_class_click.py


.PHONY: test
pyppeteer-activate-tab:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/active-tab/test_page_class_bringtofront.py


###### Testing Custom Environment - https://miyakogi.github.io/pyppeteer/reference.html#environment-variables
# Available versions: 113, 121, and default
.PHONY: test
pyppeteer-custom-chromium-version:
   - echo $(EXEC_PLATFORM)
   - echo 'Browser Version:' $(CHROMIUM_VERSION)
   - $(PYTEST) --verbose --capture=no -s tests/custom-configuration/test_launcher_exe_path.py


###### Testing Headless - https://miyakogi.github.io/pyppeteer/reference.html#launcher
# Available values: headless and non-headless
.PHONY: test
pyppeteer-custom-browser-mode:
   - echo $(EXEC_PLATFORM)
   - echo $(BROWSER_MODE)
   - $(PYTEST) --verbose --capture=no -s tests/custom-configuration/test_launcher_headless.py


.PHONY: test
pyppeteer-generate-pdf:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/generate-pdf/test_page_class_pdf.py


.PHONY: test
pyppeteer-generate-screenshot:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/generate-screenshots/test_page_class_screenshot.py


.PHONY: test
pyppeteer-cookies:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/handling-cookies/test_page_class_cookies.py


.PHONY: test
pyppeteer-dialog-box:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/handling-dialog-box/test_handling_dialog_box.py


.PHONY: test
pyppeteer-iframe:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/handling-iframe/test_page_class_iframe.py


# Like Puppeteer, Navigation operations mentioned below only work in Headless mode
# goBack: https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.goBack
# goForward: https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.goForward


# Bug Link
# https://github.com/puppeteer/puppeteer/issues/7739
# https://stackoverflow.com/questions/65540674/how-to-error-check-pyppeteer-page-goback


.PHONY: test
pyppeteer-navigate-ops:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/navigate-operations/test_page_class_navigation_ops.py


.PHONY: test
pyppeteer-request-response:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/request-response/test_page_class_req_resp.py


.PHONY: test
pyppeteer-viewport:
   - echo $(EXEC_PLATFORM)
   - echo $(BROWSER_MODE)
   - $(PYTEST) --verbose --capture=no -s tests/setting-useragent-viewports/\
   test_page_class_useragent_viewport.py::test_mod_viewport


.PHONY: test
pyppeteer-non-headless-useragent:
   - echo $(EXEC_PLATFORM)
   - echo $(BROWSER_MODE)
   - $(PYTEST) --verbose --capture=no -s tests/setting-useragent-viewports/\
   test_page_class_useragent_viewport.py::test_get_nonheadless_user_agent


.PHONY: test
pyppeteer-headless-useragent:
   - echo $(EXEC_PLATFORM)
   - echo $(BROWSER_MODE)
   - $(PYTEST) --verbose --capture=no -s tests/setting-useragent-viewports/\
   test_page_class_useragent_viewport.py::test_get_headless_user_agent


.PHONY: test
pyppeteer-dynamic-content:
   - echo $(EXEC_PLATFORM)
   - echo $(BROWSER_MODE)
   - $(PYTEST) --verbose --capture=no -s -n 4 tests/handling-dynamic-content/\
   test_page_class_lazy_loaded_content.py


.PHONY: test
pyppeteer-web-scraping:
   - echo $(EXEC_PLATFORM)
   - $(PYTEST) --verbose --capture=no -s tests/web-scraping-content/\
   test_scraping_with_pyppeteer.py


.PHONY: clean
clean:
   # This helped: https://gist.github.com/hbsdev/a17deea814bc10197285
   find . | grep -E "(__pycache__|\.pyc$$)" | xargs rm -rf
   rm -rf .pytest_cache/
   @echo "Clean Succeeded"


.PHONY: distclean
distclean: clean
   rm -rf venv


.PHONY: help
help:
   @echo ""
   @echo "install : Install project dependencies"
   @echo "clean : Clean up temp files"
   @echo "pyunit-pyppeteer : Running Pyppeteer tests with Pyunit framework"
   @echo "pytest-pyppeteer : Running Pyppeteer tests with Pytest framework"
   @echo "pyunit-pyppeteer-browser-session : Browser session using Pyppeteer and Pyunit"
   @echo "pytest-pyppeteer-browser-session : Browser session using Pyppeteer and Pytest"
   @echo "asyncio-run-pyppeteer-browser-session : Browser session using Pyppeteer (Approach 1)"
   @echo "asyncio-run-complete-pyppeteer-browser-session : Browser session using Pyppeteer (Approach 2)"
   @echo "pyppeteer-button-click : Button click demo using Pyppeteer"
   @echo "pyppeteer-activate-tab : Switching browser tabs using Pyppeteer"
   @echo "pyppeteer-custom-chromium-version : Custom Chromium version with Pyppeteer"
   @echo "pyppeteer-custom-browser-mode : Headless and non-headless test execution with Pyppeteer"
   @echo "pyppeteer-generate-pdf : Generating pdf using Pyppeteer"
   @echo "pyppeteer-generate-screenshot : Generating page & element screenshots with Pyppeteer"
   @echo "pyppeteer-cookies : Customizing cookies with Pyppeteer"
   @echo "pyppeteer-dialog-box : Handling Dialog boxes with Pyppeteer"
   @echo "pyppeteer-iframe : Handling iFrames with Pyppeteer"
   @echo "pyppeteer-navigate-ops : Back & Forward browser operations with Pyppeteer"
   @echo "pyppeteer-request-response : Request and Response demonstration using Pyppeteer"
   @echo "pyppeteer-viewport : Customizing viewports using Pyppeteer"
   @echo "pyppeteer-non-headless-useragent : Customizing user-agent (with browser in headed mode) using Pyppeteer"
   @echo "pyppeteer-headless-useragent : Customizing user-agent (with browser in headless mode) using Pyppeteer"
   @echo "pyppeteer-dynamic-content : Handling dynamic web content using Pyppeteer"
   @echo "pyppeteer-web-scraping : Dynamic web scraping using Pyppeteer"

Since environment variables LT_USERNAME and LT_ACCESS_KEY are used for accessing the LambdaTest cloud grid, replace them with credentials from LambdaTest Accounts Page. Also, make install sets up configurations & installs dependencies from the .toml & requirements.txt, respectively.

Invoking make clean on the terminal removes all the generated files or artifacts (e.g., *.pyc) created during the build process.

Typing make help provide all the options available for execution.

Like earlier, we are not getting into the nuances of Makefile since it is pretty much self-explanatory! With the stage all set, let’s get our hands dirty by implementing some prominent scenarios (including web scraping) with Pyppeteer.

*Note: **The examples below work on local Chromium (EXEC_PLATFORM = local*) and Chrome on LambdaTest cloud grid (EXEC_PLATFORM = cloud).

Test native, hybrid, and web apps on any mobile OS with our free online emulator Android. Sign up to optimize app performance.

Setting up a browser session with Pyppeteer

Like any other library (or framework), the first step is to instantiate the browser and navigate to the respective URL. The launch() function of the pyppeteer.launcher module is invoked to start up a new instance of the Chrome (or Chromium) browser.

As stated in the Pyppeteer official documentation, the headless option is set to False so that the browser is invoked in non-headless (or headed) mode. Additional arg (or argument), i.e., –start-maximized, is also passed to the launch() function so that the browser is maximized.

Now that the browser is instantiated, the newPage() function is invoked to create a new page within the browser. The method returns a Page object that represents the newly opened page.

Finally, the goto() method of the Page class is used to navigate to the URL under test.

We compare the page title with the expected title in the current test. An assert is raised in case the titles do not match.

There are a couple of ways to invoke the test scenarios. The choice depends on the automation framework being used in conjunction with Pyppeteer.

Approach 1: Using the run function of the asyncio module

The first approach is using the run_until_complete(future) method (of the asyncio module) until the future has been completed. It blocks the execution of the code following it.

import asyncio
import pytest
import os
import sys
import json
from os import environ
from urllib.parse import quote
from pyppeteer import connect, launch
from pyppeteer.errors import PageError


test_url = 'https://search.brave.com/'
exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


# Capabilities array with the respective configuration for parallel tests
cloud_capabilities = {
       'browserName': 'Chrome',
       'browserVersion': 'latest',
       'LT:Options': {
           'platform': 'Windows 11',
           'build': '[Build] Launching browser session with Pyppeteer (with Pytest)',
           'name': 'Launching browser session with Pyppeteer (with Pytest)',
           'user': username,
           'accessKey': access_key,
           'resolution': '1920x1080',
           'network': True,
           'video': True,
           'console': True,
           'headless': False
       }
}


local_capabilities = {
       'browserName': 'Chrome'
}


async def test_browser_session():
   # Launch a new browser instance
   # browser = await launch()
   if exec_platform == 'cloud':
       capability = quote(json.dumps(cloud_capabilities))
       print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


       browser = await connect(
           browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
       )
   elif exec_platform == 'local':
       print('Initializing test:: ', local_capabilities['browserName'])
       browser = await launch(headless = False, args=['--start-maximized'])


   # Create a new page
   page = await browser.newPage()


   # Navigate to a website
   await page.goto('https://search.brave.com/')
   title = await page.title()
   print(title)


   try:
       assert title == 'Private Search Engine - Brave Search', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   # Release the resources
   await page.close()
   await asyncio.sleep(1)
   await browser.close()


# Run the event loop
asyncio.get_event_loop().run_until_complete(test_browser_session())

The second approach is to execute the coroutine directly by passing the coroutine to the run() function of the asyncio module. As stated in the official documentation, the run() function cannot be called when another asyncio event loop is running in the same thread.

As shown below, the test method [i.e., test_lambdatest_search() ] is passed to the run() function. These test execution steps are repeated for all the browser capabilities passed to the test method (or coroutine).

Here is the complete implementation of setting up a browser session with Pyppeteer when coroutines (or test methods) are run using the run() function.

import asyncio
import pytest
import os
import sys
import json
from os import environ
from urllib.parse import quote
from pyppeteer import connect, launch
from pyppeteer.errors import PageError


test_url = 'https://search.brave.com/'
exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


# Capabilities array with the respective configuration for parallel tests
cloud_capabilities = {
       'browserName': 'Chrome',
       'browserVersion': 'latest',
       'LT:Options': {
           'platform': 'Windows 11',
           'build': '[Build] Launching browser session with Pyppeteer (with Pytest)',
           'name': 'Launching browser session with Pyppeteer (with Pytest)',
           'user': username,
           'accessKey': access_key,
           'resolution': '1920x1080',
           'network': True,
           'video': True,
           'console': True,
           'headless': False
       }
}


local_capabilities = {
       'browserName': 'Chrome'
}


# Pytest fixture for browser setup
@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'cloud':
       capability = quote(json.dumps(cloud_capabilities))
       print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


       browser = await connect(
           browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
       )
   elif exec_platform == 'local':
       print('Initializing test:: ', local_capabilities['browserName'])
       browser = await launch(headless = False, args=['--start-maximized'])

   yield browser


   await asyncio.sleep(1)


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()


   yield page
   await page.close()
   await asyncio.sleep(1)
   await browser.close()


@pytest.mark.asyncio
async def test_browser_session(page):
   await page.goto('https://search.brave.com/')
   title = await page.title()
   print(title)


   try:
       assert title == 'Private Search Engine - Brave Search', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')

Approach 2: Using Pyppeteer with pytest

As mentioned earlier, Pyppeteer can also be used with the pytest framework. The yield in conjunction with pytest fixtures is used for implementing the setup and teardown logic for the following:

Instantiating the browser [using either connect() or launch() methods]
Creating a new page in the browser context [using newPage() method]
Closing & releasing the resources held by the instantiated browser and page

Here is the complete implementation of setting up a browser session with Pyppeteer in conjunction with the pytest framework:

import asyncio
import pytest
import os
import sys
import json
from os import environ
from urllib.parse import quote
from pyppeteer import connect, launch
from pyppeteer.errors import PageError


test_url = 'https://search.brave.com/'
exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


# Capabilities array with the respective configuration for parallel tests
cloud_capabilities = {
       'browserName': 'Chrome',
       'browserVersion': 'latest',
       'LT:Options': {
           'platform': 'Windows 11',
           'build': '[Build] Launching browser session with Pyppeteer (with Pytest)',
           'name': 'Launching browser session with Pyppeteer (with Pytest)',
           'user': username,
           'accessKey': access_key,
           'resolution': '1920x1080',
           'network': True,
           'video': True,
           'console': True,
           'headless': False
       }
}


local_capabilities = {
       'browserName': 'Chrome'
}


# Pytest fixture for browser setup
@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'cloud':
       capability = quote(json.dumps(cloud_capabilities))
       print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


       browser = await connect(
           browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
       )
   elif exec_platform == 'local':
       print('Initializing test:: ', local_capabilities['browserName'])
       browser = await launch(headless = False, args=['--start-maximized'])

   yield browser


   await asyncio.sleep(1)


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()


   yield page
   await page.close()
   await asyncio.sleep(1)
   await browser.close()


@pytest.mark.asyncio
async def test_browser_session(page):
   await page.goto('https://search.brave.com/')
   title = await page.title()
   print(title)


   try:
       assert title == 'Private Search Engine - Brave Search', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')

In this article, we take a look at some aspects of simulation and discuss some ways through which we can use ios emulator for pc Windows.

Approach 3: Using Pyppeteer with PyUnit

As stated earlier, Pyppeteer can also be used with the PyUnit (or unittest) framework. However, I would always prefer pytest (with Pyppeteer) over PyUnit (with Pyppeteer) since PyUnit (or unittest) methods are synchronous — a deal breaker when used with the Pyppeteer library!

Since the intent is to run synchronous and asynchronous code, we have used the IsolatedAsyncioTestCase test class in the unittest module. The IsolatedAsyncioTestCase class provides an API similar to TestCase and accepts coroutines as test functions. It also isolates the test case’s asyncio event loop, providing each test case with its fresh event loop.

The IsolatedAsyncioTestCase class provides the asyncSetUp() & asyncTearDown() methods that accept coroutines. These methods are called after setUp() and before tearDown(), respectively.

Here is the complete implementation of setting up a browser session with Pyppeteer in conjunction with the PyUnit (or unittest) framework:

import asyncio
import unittest
from pyppeteer import connect, launch
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
from os import environ


exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


# Capabilities array with the respective configuration for parallel tests
cloud_capabilities = {
       'browserName': 'Chrome',
       'browserVersion': 'latest',
       'LT:Options': {
           'platform': 'Windows 11',
           'build': '[Build] Launching browser session with Pyppeteer (with unittest)',
           'name': 'Launching browser session with Pyppeteer (with unittest)',
           'user': username,
           'accessKey': access_key,
           'resolution': '1920x1080',
           'network': True,
           'video': True,
           'console': True,
           'headless': False
       }
}


local_capabilities = {
       'browserName': 'Chrome'
}


class LambdaTestAsyncTest(unittest.IsolatedAsyncioTestCase):
   async def asyncSetUp(self):
       if exec_platform == 'cloud':
           capability = quote(json.dumps(cloud_capabilities))
           print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


           self.browser = await connect(
               browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
           )
       elif exec_platform == 'local':
           print('Initializing test:: ', local_capabilities['browserName'])
           self.browser = await launch(headless = False, args=['--start-maximized'])


       await asyncio.sleep(1)
       self.page = await self.browser.newPage()


   async def asyncTearDown(self):
       await self.page.close()
       await asyncio.sleep(1)
       await self.browser.close()


   async def test_page_title(self):
       await self.page.goto('https://search.brave.com/')
       title = await self.page.title()
       print('Scenario 1: Page Title ' + title)


       try:
           assert title == 'Private Search Engine - Brave Search', 'Expected page title is incorrect!'
           await self.page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
       except PageError as e:
           await self.page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   async def test_page_content(self):
       # Navigate to a website to see the effect
       await self.page.goto('https://www.duckduckgo.com')
       element = await self.page.querySelector('[name="q"]')


       await element.click()
       await element.type('LambdaTest')
       await asyncio.gather(
           self.page.keyboard.press('Enter'),
           self.page.waitForNavigation()
       )


       page_title = await self.page.title()
       print('Scenario 2: Page Title ' + page_title)
       return page_title


if __name__ == '__main__':
   unittest.main()

Execution

To run the set up a browser session with Pyppeteer, simply trigger the relevant make command from the terminal:

As seen below, we have set the EXEC_PLATFORM to local and successfully started a browser session using PyUnit (or unittest) with Pyppeteer.

Perform browser automation testing on the most powerful cloud infrastructure. Leverage LambdaTest test automation cloud for faster, reliable and scalable experience on cloud.

Clicking buttons with Pyppeteer

Page class in Pyppeteer provides the click() method for clicking on an element that matches the selector. For example, when clicking buttons with Selenium, the first step is to locate the element using XPath, CSS Selector, or any other suitable locator.

Once the element is located, the click() method also scrolls it into view (if needed). Once inside the view, it uses the mouse to click in the element’s center. Like the Selenium exception, the click() *method raises *PageError if it is impossible to interact with the element (or if there is any other error on the page).

Syntax

coroutine click(selector: str, options: dict = None, **kwargs)

The available options are below:

button (str) — left, right, or middle (default: left)
clickCount (int) — 1 (default)
delay (int|float) — Time to wait between mouse-down and mouse-up in milliseconds (default — 0)

Demonstration

For demonstrating button click with Pyppeteer, we use the following test scenario:

Navigate to https://ecommerce-playground.lambdatest.io/.
Click on the menu item ‘Shop by category’.
Add Macbook Pro to the cart.
Assert if the checkout is not successful.

The complete implementation of realizing button clicks with Pyppeteer:

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


test_url = 'https://ecommerce-playground.lambdatest.io/'
product_url = 'https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57'


# XPath's of the elements that need to be located on the page


shopcategory = "//a[contains(.,'Shop by Category')]"
megamenu = "//a[contains(.,'Mega Menu')]"
# We could have also used XPath for the same
# phonecategory = "//span[contains(.,'Phone, Tablets & Ipod')]"


phonecategorySelector = '#widget-navbar-217841 > ul > li:nth-child(3) > a > div.info > span'
# Macbook Air product
macbook_locator = '#mz-product-grid-image-44-212408'


# Buy Now button
button_buynow = '.btn-buynow'
target_checkout_url = 'https://ecommerce-playground.lambdatest.io/index.php?route=checkout/checkout'
target_page_str = 'Billing Address'


menu_hover_xpath = "//*[@id='__docusaurus']/nav/div[1]/div[2]/div[1]"


@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_click_element(page):
   # await page.goto(test_url)
   await page.goto(test_url,
       {'waitUntil': 'load'})


   # Wait for the 'Shop by Category' menu to be available
   menu_element = await page.waitForXPath(shopcategory)


   # Click on the 'Shop by Category' menu
   await menu_element.click()


   # Can be changed with non-blocking sleep
   await asyncio.sleep(2)


   shop_element = await page.waitForSelector(phonecategorySelector, {'visible': True})


   # Click on the 'Shop by Category' menu
   if exec_platform == 'local':
       await shop_element.click()
   elif exec_platform == 'cloud':
       await asyncio.gather(
           shop_element.click(),
           page.waitForNavigation({'waitUntil': 'networkidle2', 'timeout': 60000}),
       )


   # Can be changed with non-blocking sleep
   await asyncio.sleep(2)


   page_title = await page.title()


   try:
       assert page_title == "Tablets"
       print("Test Success: Reached the target URL")
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       print("Test Failure: Recheck the URL")
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   await asyncio.sleep(2)


   elem_macbook = await page.waitForSelector(macbook_locator, {'visible': True})


   # Click on the 'Shop by Category' menu
   await elem_macbook.click()


   await asyncio.sleep(2)


   # Click on the Buy Now Button
   elem_buynow = await page.waitForSelector(button_buynow, {'visible': True})
   if exec_platform == 'local':
       await elem_buynow.click()
   elif exec_platform == 'cloud':
       await asyncio.gather(
           elem_buynow.click(),
           page.waitForNavigation({'waitUntil': 'networkidle2'}),
       )


   await asyncio.sleep(2)


   current_url = page.url
   print('Current URL is: ' + current_url)


   try:
       assert current_url == target_checkout_url
       print("Test Success: Product checkout successful")
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       print("Test Failure: Could not checkout Product")
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   await asyncio.sleep(2)


@pytest.mark.asyncio
@pytest.mark.order(2)
async def test_get_content(page):
   await page.goto('https://ecommerce-playground.lambdatest.io/')


   await asyncio.sleep(2)


   html_content = await page.content()


   await asyncio.sleep(2)


   assert 'Upto 50% Off on Fully Automatic' in html_content, "Expected string not found in page content"

Code Walkthrough

Since we are using the pytest framework with Pyppeteer library, we first import pytest, pyppeteer, and json modules.

The tests are marked with the @pytest.mark.asyncio decorator, making them coroutines instead of tests (or test methods). This lets us use await code inside the tests.

Next, the @pytest.mark.order marker of the pytest-order plugin is used to order the execution of the tests.

The goto() method of the Page class is invoked to navigate to the URL under test. The waitUntil option is set to load (i.e., default — navigation succeeds when the load event is fired).

The waitUntil option can also be set to domcontentloaded (i.e., DOMContentLoaded is fired), networkidle0 (i.e., no more than 0 network connections for at least 500 ms), or networkidle2 (i.e., no more than 2 network connections for at least 500 ms).

Now that the page is loaded, we use the waitForXPath() method until the element matching the XPath appears on the page. The default wait is 3000 ms.

We locate the menu item using the CSS Selector, passed to the waitForSelector() *method of the *Page *class. The method returns immediately in case the selector already exists on the page. On the other hand, it waits until the selector appears on the page for the duration specified by the *timeout value (default — 3000 ms).

As seen below, the visible option is set to True; hence, it waits for the element to be visible when it is present in the DOM.

Once the element is located, the click() method is invoked for clicking on the element. In order to ensure that there is zero test flakiness (when using the cloud grid), we have also used the waitForNavigation() method with the timeout set to 60000 ms.

The waitUntil option in the method is set to networkidle2. Hence, the execution moves to the next line only if there is a timeout or when there are no more than 2 network connections for at least 500 ms.

**What is Xcode: It is an IDE developed by Apple for developing your applications for macOS, iOS, iPadOS, watchOS, tvOS, and visionOS with powerful, integrated tools.**

Then, we check the page title using the title() method of the Page class.

Once we have the page title, the page.evaluate() method in Pyppeteer is used to execute JavaScript code within the context of a page. An assert is raised in case the title (of the current page) does not match with the expected page title.

Now that we are on the Product Page, we locate the respective WebElement using the CSS Selector. The visible option in the waitForSelector() method is set to True; hence, it waits for the located element to be visible in the DOM. By default, the timeout is 30000 ms (or 30 seconds).

Once the button is clicked, we pause the execution (for 2 seconds) by invoking the asyncio.sleep(). It is used for introducing asynchronous delays in an event loop.

After an asynchronous sleep of 2 seconds, the Buy Now button is located using the CSS Selector (i.e., .btn-buynow). Like earlier, the visibility of the located element is checked; otherwise, an exception is raised if the element is not visible within a default timeout of 30000 ms.

Here, we have used asyncio.gather(), a function provided by the asyncio library that allows multiple coroutines to be executed concurrently and waits for them to complete before moving further with the execution.

In our case, the click to the located element (or button) and waiting for the page to load with the waitUntil *option set to *networkidle2 *are executed as a part of the *gather() function.

Finally, the current page’s URL is fetched by invoking the url() method of the Page class. An assert is raised if the current URL does not match the expected destination URL.

Execution

To automate interactions with a button element with Pyppeteer, invoke the command *make pyppeteer-button-click *on the terminal. In our case, we have set the execution to the LambdaTest cloud grid.

Below is the snapshot from the LambdaTest Automation Dashboard indicating that the test execution was successful.

Explore ‘What is TDD’ in Agile with our comprehensive tutorial. Learn Test-Driven Development meaning, examples, and best practices for effective software development.

Printing PDF files with Pyppeteer

Testing PDF files is a common test scenario with any automation framework, and the same is the case with the Pyppeteer library. The *pdf() *method (or coroutine) of the *Page *class lets you generate a pdf of the entire web page.

As stated in official Pyppeteer documentation, generating PDFs is only supported in headless mode. The pdf() method provides many options, some mentioned below:

*Image Source*

By default, the pdf() method generates a pdf of the page with print CSS media. For generating a PDF with screen media, page.emulateMedia(‘screen’) needs to be invoked before invoking the pdf() method.

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import os
import sys
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


test_url = 'https://lambdatest.com/'


# Selectors of the page
# Pytest fixture for browser setup
@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'local':
       browser = await launch()
   yield browser
   await asyncio.sleep(1)   
   await browser.close()


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()
   yield page
   await page.close()


@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_print_pdf(page):
   await page.goto(test_url, {'waitUntil' : 'networkidle2'})


   asyncio.sleep(1)


   page.emulateMedia('screen')


   # Further details
   # https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.pdf
   await page.pdf({'path': 'lambdatest.pdf', 'format': 'A4'})

Code Walkthrough

The launch() method is invoked for instantiating headless Chrome. Since we are using pytest with Pyppeteer, *browser *instance and *new pages *on the browser are created under the pytest fixture with *function *scope.

Before printing the page, the emulateMedia() method is called to simulate the appearance of the page when rendered for *screen *media.

Finally, the pdf() method of the Page *class is invoked with the path set to *current-working-directory/lambdatest.pdf and format set to A4.

Execution

In order to generate a PDF of the current web page with Pyppeteer, invoke the command *make pyppeteer-generate-pdf *on the terminal. We have instantiated the Chromium browser on the local machine for this scenario.

Below is a screenshot of the generated PDF document:

**Dynamic testing evaluates software by executing code to identify defects, ensuring functionality, and verifying system performance. Learn what is dynamic testing, its types, phases, and more.**

Opening specified version of Chromium browser with Pyppeteer

As stated in the earlier sections, Pyppeteer also provides the flexibility to use a specified version of Chromium. The version can be specified in the PYPPETEER_CHROMIUM_REVISION environment variable.

The other option is downloading the required version of the Chromium browser on the machine. After that, we have to pass the path to launch() method of the Launcher *class. The *executablePath option in the launch() method lets you run the specified Chromium version instead of the default bundled Chromium.

To run a particular version of Chromium on the machine (e.g., macOS in my case), we downloaded a couple of Chromium versions from the following locations:

I have uploaded the downloaded different Chromium browser versions in the mac-chrome folder.

Once downloaded, you need to copy the different versions of Chromium in the mac-chrome folder in the root of the working directory.

With this, we are all set to run Pyppeteer with the different versions of the Chromium browser!

Demonstration

In the sample shown below, choosing Chromium versions (default, 121, and 113) is flexible depending on the value of the CHROMIUM_VERSION environment variable. For this example, you must ensure that EXEC_PLATFORM is set to local.

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


# Can take values - headless and non-headless
chromium_version = os.getenv('CHROMIUM_VERSION')


# Pytest fixture for browser setup
@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'local':
       if chromium_version == '121':
           custom_chrome_path = "mac-chrome/Chromium_121.app/Contents/MacOS/Chromium"
       elif chromium_version == '113':
           custom_chrome_path = "mac-chrome/Chromium_113.app/Contents/MacOS/Chromium"
       else:
           custom_chrome_path = "mac-chrome/Chromium.app/Contents/MacOS/Chromium"

   browser = await launch(headless = False,
               executablePath = custom_chrome_path, args=['--start-maximized'])
   yield browser
   await asyncio.sleep(1)   
   await browser.close()


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()
   yield page
   await page.close()


# Ported code from https://github.com/LambdaTest/puppeteer-sample/blob/main/puppeteer-parallel.js


@pytest.mark.asyncio
async def test_exe_path(page):
   await page.goto('https://www.duckduckgo.com')
   await page.setViewport({'width': 1920, 'height': 1080})


   element = await page.querySelector('[name="q"]')
   await element.click()
   await element.type('LambdaTest')
   await asyncio.gather(
       page.keyboard.press('Enter'),
       page.waitForNavigation()
   )


   page_title = await page.title()


   try:
       assert page_title == 'LambdaTest at DuckDuckGo', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')

Code Walkthrough

To get started, we read the value of the environment variable CHROMIUM_VERSION.

Once the value of the environment variable is read, the custom path is assigned to *executablePath *[of the *launch() *method].

As seen in the modified pytest fixture implementation, the custom Chromium browser is launched in non-headless mode and maximized state.

As stated in the official documentation, Pyppeteer works best with the version of Chromium it is bundled with. However, we did not encounter any issues when testing with the custom versions of the Chromium!

In the test method [i.e. test_exe_path()], we first set the viewport size to (1920* 1080) using the setViewport() method.

After that, we locate the text-box element in the DuckDuckGo search page with the CSS Selector.

Next, we enter the search term LambdaTest in the search box. As a part of asyncio.gather(), we first trigger the Enter key via the press() method of the keyboard *class. The *waitForNavigation() method waits (for a maximum of 30000 ms) for the navigation event to occur before it proceeds to the next step in execution.

Execution

We first set the EXEC_PLATFORM variable to local. For execution on Chromium version 121, set the CHROMIUM_VERSION to 121 by triggering the export CHROMIUM_VERSION=121 command on the terminal. Run the make pyppeteer-custom-chromium-version command to run the automated test on the specified Chromium version.

To verify the Chromium version, we temporarily disabled closing (or releasing resources) of the Page & Browser.

As seen below, the tests are rightly triggered on Chromium v121!

For execution on Chromium version 113, set the CHROMIUM_VERSION to 113 by triggering the export CHROMIUM_VERSION=113 command on the terminal. Run the make pyppeteer-custom-chromium-version command to run the automated test on the specified Chromium version.

Check out top Java Frameworks to use in 2023. Elevate your web development with top Java frameworks such as JUnit, Spring, Hibernate, Play, Apache Struts, Blade, Grails, and more.

Switching tabs with Pyppeteer

Switching tabs in a browser is very commonly used when automating browser-based test scenarios. The same principle also applies to Pyppeteer as well. Every invocation of the *newPage() *method in Pyppeteer returns a Page Object. This becomes the identifier of the page, similar to window handles in Selenium. To learn more about it you can go through this blog on handling windows in Selenium.

In case more than one browser page is open, you use the targets() method that returns a list consisting of all active targets inside the browser. Switching to a certain tab (or activating a tab) in Pyppeteer is done via the bringToFront() method of the Page class.

Demonstration

For demonstration, let’s open up two browser tabs and switch to the first tab using the bringToFront() coroutine.

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


@pytest.mark.asyncio
async def test_bring_to_front(browser, page):
   await page.goto('https://www.duckduckgo.com', {'waitUntil' : 'networkidle2'})
   # Maximize the page
   await page.setViewport({'width': 1920, 'height': 1080})


   element = await page.querySelector('[name="q"]')
   await element.click()
   await element.type('LambdaTest')
   await asyncio.gather(
       page.keyboard.press('Enter'),
       page.waitForNavigation()
   )


   # Use asyncio.sleep within the async test function
   # await asyncio.sleep(1)


   page_title = await page.title()


   try:
       assert page_title == 'LambdaTest at DuckDuckGo', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')



   page_1 = await browser.newPage()
   await page_1.goto('https://www.lambdatest.com', {'waitUntil' : 'networkidle2'})


   await page.bringToFront()
   await asyncio.sleep(2)

Code Walkthrough

Since the test scenario remains unchanged, we would only focus on how tabs are switched in the example. First, we open a new page with the URL under test set to DuckDuckGo.

Next, we open a new page with the URL under test set to LambdaTest. As seen below, the page identifier is set to page_1.

For switching to the earlier tab, we invoke the bringToFront() method on the page object — page.

Execution

Invoke the command make pyppeteer-activate-tab on the terminal with the Chromium browser instantiated on the local machine.

As seen in the execution screenshot, the older tab (where the DuckDuckGo scenario is run) is brought back to focus.

Taking screenshots with Pyppeteer

Capturing screenshots with Selenium, Pyppeteer, Cypress, etc., is a common practice for isolating and debugging visual issues in the website/app. Screenshots are also essential for visual regression testing, as it helps in comparing captured screenshots with the baseline screenshots.

Apart from identifying visual inconsistencies, screenshots (full-page or element-level) provide a visual confirmation of the page at a particular point in time. The screenshot() method of the *Page *class helps capture a screenshot of the entire page or a particular element that is currently under focus.

The screenshot() method throws an ElementHandleError in case the target element is detached from the DOM.

For capturing element screenshot, we first capture the element using an appropriate locator. Once located, the boundingBox() method is used to calculate the bounding box of the element.

*BoundingBox*

The boundingBox() method returns a dictionary of items mentioned below:

x (integer): X coordinate value in pixels
y (integer): Y coordinate value in pixels
*width *(integer): Element width in pixels
*height *(integer): Element height in pixels

Demonstration

For demonstrating capturing screenshots with Pyppeteer, we automate the following test scenario on Chromium installed on the local machine (EXEC_PLATFORM = local):

Navigate to the Product Page
Locate the required element using the most-suited selector.
Click on the located element.
Capture full-page screenshots and element screenshots.

Further details of screenshot API

https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.screenshot

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import os
import sys
from os import environ
from pyppeteer import connect, launch

exec_platform = os.getenv('EXEC_PLATFORM')

timeOut = 60000

test_url = 'https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=30'
loc_product_1 = "#mz-product-grid-image-43-212408 > div > div.carousel-item.active > img"
loc_final_product = "#image-gallery-216811 > div.image-thumb.d-flex > a > img"
target_url = "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=25_30&product_id=43"

@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_screenshot(page):
# The time out can be set using the setDefaultNavigationTimeout
# It is primarily used for overriding the default page timeout of 30 seconds
page.setDefaultNavigationTimeout(timeOut)
await page.goto(test_url,
{'waitUntil': 'networkidle2', 'timeout': timeOut})

await asyncio.sleep(1)

# Wait for the element to be present in the DOM
elem_prod_link = await page.waitForSelector(loc_product_1, {'visible': True})
# elem_prod_link = await page.querySelector(loc_product_1)

await asyncio.sleep(2)

await asyncio.gather(
elem_prod_link.click(),
page.waitForNavigation()
)

# Assert if required, since the test is a simple one; we leave as is :D
current_url = page.url
print('Current URL is: ' + current_url)

try:
assert current_url == target_url
print("Test Success: Product checkout successful")
except PageError as e:
print("Test Failure: Could not checkout Product")
print("Error Code" + str(e))

await asyncio.sleep(2)

# Wait for the element to be present in the DOM
await page.waitForSelector(loc_final_product)
elem_prod_img = await page.querySelector(loc_final_product)

# Further information on boundingBox
# https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.element_handle.ElementHandle.boundingBox
bounding_box = await elem_prod_img.boundingBox()

# Take a screenshot of the element
if bounding_box:
await elem_prod_img.screenshot({'path': 'product-screenshot.png', 'clip': bounding_box})

await asyncio.sleep(1)

# Take a screenshot of the entire page
await page.screenshot({'path': 'page-screenshot.png'})

Code Walkthrough

We first navigate to the LambdaTest eCommerce Playground using the *goto() *method of the *Page *class.

Next, we locate the required element using the CSS Selector property. Instead of CSS Selector, you can also use XPath, in which case you would need to use waitForXPath() *instead of the *waitForSelector() method.

Click operation is performed on the located element using the click() method. Like before, the waitForNavigation() method after the click helps wait for the completion of the navigation operation before the browser proceeds with further actions.

The product image is located via the CSS Selector. The querySelector() method of the Page *class returns the *ElementHandle of the element that matches the selector.

Next, the boundingBox() method on the located element returns a dictionary of the bounding box.

To capture a screenshot of the element, the screenshot() method is used with the clip option that specifies an object (of type dict), which specifies the clipping region of the page. The screenshot is saved as product-screenshot.png.

The page screenshot (saved as page-screenshot.png) is captured by invoking the screenshot() method. The fullPage option is set to False (default) and takes a screenshot of the page currently under display.

Full-page (or scrollable) screenshot is captured by setting the fullPage option to True.

Execution

Invoke the command make pyppeteer-generate-screenshot on the terminal with the Chromium browser instantiated on the local machine. As seen below, the test execution is successful.

The full-page screenshot is below:

The scrollable-page screenshot is below:

The element screenshot is below:

In summary, the screenshot() method of Pyppeteer has all the options to realize visual regression testing with Python!

Managing cookies with Pyppeteer

Website cookies plays an integral role in automated testing. Modifying cookies can be useful for test scenarios related to session management, localization testing, handling cookie consent, and cross browser testing.

I recommend reading this detailed blog on handling cookies with Selenium, as overall cookie handling principles remain unchanged irrespective of the framework (or library) used for automated testing. The Pyppeteer library provides the following methods (or coroutines) for cookie management:

Demonstration

For demonstrating cookie management with Pyppeteer, we automate the following test scenario on Chromium installed on the local machine (EXEC_PLATFORM = local):

Navigate to LambdaTest eCommerce Playground.
Print cookies.
Set a new cookie.
Delete a cookie and print the cookies.

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch

exec_platform = os.getenv('EXEC_PLATFORM')
test_url = 'https://ecommerce-playground.lambdatest.io/'

cookie_dict = {}

@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_get_cookie_info(page):
await page.goto(test_url)

await asyncio.sleep(1)

# Output is a list of dictionaries
# https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.cookies
cookie_dict = await page.cookies()

await asyncio.sleep(1)

# Let's print values of all the cookies
for cookie in cookie_dict:
print("Cookie Name:")
for key, val in cookie.items():
print(f' {key}: {val}')
print()

@pytest.mark.asyncio
@pytest.mark.order(2)
async def test_delete_cookies(page):
before_del_cookies = {}
after_del_cookies = {}

await page.goto(test_url)

await asyncio.sleep(12)

# https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.cookies
# Create/Add a new cookie
await page.setCookie({'name': 'pyppeteer', 'value': 'v1.0.2'})

before_del_cookies = await page.cookies()
print("\nBefore deletion\n")

print_cookie(before_del_cookies)

# Delete cookies
await page.deleteCookie({'name': 'pyppeteer'})

after_del_cookies = await page.cookies()
print("After deletion\n")

print_cookie(after_del_cookies)

def print_cookie(cookie_info):
# Let's print values of all the cookies
for cookie in cookie_info:
print("Cookie Name:")
for key, val in cookie.items():
print(f' {key}: {val}')
print()

Code Walkthrough

After navigating to the URL under test, get the cookies by invoking the cookies() method of the *Page *class.

The cookies() method returns a dictionary of key: value pairs. An iterative For loop is used for printing the value of each cookie.

Next up, we set a new cookie pyppeteer *to *v1.0.2 value with the setCookie() method of the *Page *class.

With the new cookie set, we delete the cookie pyppeteer by invoking the deleteCookie() method, where the cookie name is passed as a parameter to the method.

At each step, cookies are printed before & after the deletion of cookies.

Execution

Invoke the command make pyppeteer-cookies on the terminal with the Chromium browser instantiated on the local machine. As seen below, the newly-added cookie pyppeteer is successfully set to v1.0.2, and the cookie added by the setCookie() method was successfully deleted by the deleteCookie() method.

Handling iFrames with Pyppeteer

iFrames (or inline frames) are commonly used in websites to insert a document from an entirely different domain. Handling iFrames with Selenium, Cypress, Pyppeteer, and other automation frameworks is a common test scenario for automating interactions with modern websites.

The < iframe > tag in HTML specifies an inline frame. Every HTML page (or document) has a top-level frame called a parent frame. The parent (or main) frame is the container of the child frames or iFrames. Shown below is an example of an iFrame from LambdaTest Selenium Playground.

iFrame Example

The methods (or coroutines) for accessing iFrames with Pyppeteer are available in the *Frame* class. Here are some prominent methods for handling iFrames with Pyppeteer:

Demonstration

For demonstrating iFrame handling with Pyppeteer, we automate the following test scenario on Chromium installed on the local machine (EXEC_PLATFORM = local):

Navigate to Selenium Playground iFrame Demo.
Locate the first iFrame using the best-suited selector.
Enter the message — LambdaTest is an awesome platform! in the textbox inside the iFrame.
Capture a screenshot of the Page for verification.
Locate the second iFrame using the best-suited selector.
Scroll to the element of the search string Playwright Testing.
Capture a screenshot of the Page for verification.

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import os
import sys
from os import environ
from pyppeteer import connect, launch

exec_platform = os.getenv('EXEC_PLATFORM')

test_url = 'https://www.lambdatest.com/selenium-playground/iframe-demo/'

Selectors of the page

Simple iFrame containing Editor

loc_iframe_1 = "#iFrame1"

Use class name to select an element

loc_iframe_inside_con = ".rsw-ce"
test_message = "LambdaTest is an awesome platform!"
loc_bold_button = "#__next > div > div.rsw-toolbar > button:nth-child(1)"
loc_underline_button = "//span[.='𝐔']"

Simple iFrame containing webpage

loc_iframe_2 = "//*[@id='iFrame2']"
loc_playwright_testing = "//a[.='Playwright Testing']"

async def scroll_to_element(page, element):
# Scroll until the element is detected
await page.evaluateHandle(
'''async (element) => {
if (element) {
element.scrollIntoView();
}
}'''
)

@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_handling_iframe_1(page):
await page.goto(test_url)

# Set the viewport - Apple MacBook Air 13-inch
# Reference - https://codekbyte.com/devices-viewport-sizes/
await page.setViewport({'width': 1440, 'height': 770})

asyncio.sleep(2)

# Get the iframe element handle
iframe_handle = await page.querySelector(loc_iframe_1)

# Switch to the iframe
iframe = await iframe_handle.contentFrame()

# Locate the Search button in the iFrame
# Perform actions inside the iframe
elem_text_box = await iframe.querySelector(loc_iframe_inside_con)

# Get the element inside the view
await elem_text_box.click()

await asyncio.sleep(1)

await elem_text_box.click(clickCount=3)
await page.keyboard.press('Backspace')

# Wait for 2000 ms
await iframe.waitFor(2000)

await elem_text_box.type(test_message)
await asyncio.sleep(2)
await elem_text_box.click(clickCount=3)

elem_underline_button = await iframe.waitForXPath(loc_underline_button)
elem_bold_button = await iframe.querySelector(loc_bold_button)
await asyncio.sleep(1)
await elem_underline_button.click()
await asyncio.sleep(1)
await elem_bold_button.click()
await asyncio.sleep(1)

await elem_text_box.click()

# Switch back to the main frame if needed
await page.bringToFront()

await asyncio.sleep(2)

# Take a screenshot
await page.screenshot({'path': 'iFrame1-screenshot.png'})

@pytest.mark.asyncio
@pytest.mark.order(2)
async def test_handling_iframe_2(page):
await page.goto(test_url)

# Set the viewport - Apple MacBook Air 13-inch
# Reference - https://codekbyte.com/devices-viewport-sizes/
await page.setViewport({'width': 1440, 'height': 770})

asyncio.sleep(2)

# Get the iframe element handle
iframe_handle = await page.waitForXPath(loc_iframe_2)

# Switch to the iframe
iframe = await iframe_handle.contentFrame()

# Locate the Search button in the iFrame
# Perform actions inside the iframe
elem_search = await iframe.waitForXPath(loc_playwright_testing)

# Get the element inside the view
await scroll_to_element(iframe, elem_search)
await elem_search.click()

await asyncio.sleep(2)

# Take a screenshot
await page.screenshot({'path': 'iFrame2-screenshot.png'})

Code Walkthrough

After navigating to the iFrame Demo page, we first locate the iFrame using the ID locator (i.e., iFrame1). The *querySelector() *method is used to check the presence of the *iFrame *selector.

Next, we use the contentFrame() method on the located element to get the content frame for the element handle.

Now that we have switched to the iFrame, we locate the text-area element using the CSS Selector (i.e., .rsw-ce). To simplify the process of locating elements, I have used the POM Builder plugin on Arc browser.

Since the text-area contains the default text, we first select the text by setting the clickCount to 3 in click() — a method used for stimulating mouse click on a DOM element.

The content in the text-area is deleted by pressing the Backspace key using the *press()* method of the Keyboard class.

Enter the required text LambdaTest is an awesome platform! in the text area by invoking the type() method on the text-area element. Since we also want to Bold & Italicise the text, we again select the entire text by setting the clickcount to 3.

Since we want to underline the text, we locate the element using the XPath locator. Once the element (i.e., loc_underline_button) is located, a click operation is performed to underline the text in the text area.

Similarly, we locate the element (to bold the text) using the CSS Selector. Once the element (i.e., loc_bold_button) is located, a click operation is performed to bold the text in the text area.

We switch back to the main window (or tab) by invoking the bringToFront() method. Post this, we take a full-page screenshot (iFrame1-screenshot.png) using the screenshot() method that was discussed in the earlier section.

For the second test scenario, we first locate the iFrame element using the XPath locator (i.e., iFrame2).

Switch to the iFrame by invoking the contentFrame() method on the element located in the previous step.

As seen below, two occurrences of the XPath //a[.=’Playwright Testing’] exists.

However, the element from the iFrame is selected since the waitForXPath is invoked on the iFrame element.

Now that the element within the iFrame is located, we scroll to the element by invoking the scroll_to_element() user-defined method.

A click() operation is performed so that it navigates to the Playwright testing documentation page.

Finally, we capture a screenshot of the entire page via the screenshot() method.

Execution

Invoke the command make pyppeteer-iframe on the terminal with the Chromium browser instantiated on the local machine. As seen below, the test execution is successful.

The iFrame screenshots are also successfully generated at the end of the test execution.

iFrame grab of test scenario — 1

iFrame grab of test scenario — 2

With this, you are also set to tackle iFrame-related challenges with the Pyppeteer library!

Handling alerts and pop-ups with Pyppeteer

Alerts and Pop-ups (or pop-ups) are used extensively in websites for gathering user information, seeking confirmation from end-users, and more. Simple alerts, information alerts, and prompt alerts are some of the most common types of alerts used across websites. You can learn more about handling alerts through this blog on handling alerts in windows using Selenium.

Examples of Alerts

All websites show a ‘Cookie Consent’ popup when you visit the same for the first time or from an incognito window. Below is an Exit popup on the LambdaTest website that prompts the user to try out the platform.

Since the guiding principles of alerts and popups remain unchanged, we recommend you look at the video below, which deep dives into its essentials.

As far as the Pyppeteer library is concerned, the dialog class provides methods that help handle popups and alerts. Dialog objects are dispatched by page via the dialog event.

The dismiss() method is below the dialog box. On similar lines, the accept(promptText: str = ‘’) method lets you accept the dialog. You can also pass a promptText (format: string), which is the text to enter in the prompt.

Demonstration

For demonstrating the usage of dialog boxes (or alerts & popups) with Pyppeteer, we would be automating interactions with the different alerts in LambdaTest Playground — Alert Demo.

The scenarios are automated with Chromium installed on a local machine (EXEC_PLATFORM = local). However, the same tests would also work seamlessly with Pyppeteer on LambdaTest cloud (EXEC_PLATFORM = cloud)

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


# Documentation Link
# https://miyakogi.github.io/pyppeteer/reference.html#dialog-class


# Interesting reference question
# https://stackoverflow.com/questions/75622322/
# why-dialog-popup-alert-doesnt-dismiss-as-they-claim-by-using-pyppeteer-class


# Scenario Handling Alerts
dialog_test_url = 'https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo'


# Locators for different elements
# 0 - JS Alert
# 1 - Confirm Box
# 2 - Prompt Box


loc_alert_arr =  ['.my-30',
               '.py-20.ml-10 .btn',
               'section:nth-of-type(3) div:nth-of-type(3) .btn']


test_message = 'LambdaTest is a great platform!'


# Event event listener for handling JS alert dialog box
def handle_js_dialog_box(dialog):
   asyncio.ensure_future(dialog.accept())
   print(f"Dialog message: {dialog.message}")


# Event event listener for handling confirm dialog box
def handle_confirm_accept_dialog_box(dialog):
   asyncio.ensure_future(dialog.accept())
   print(f"Dialog message: {dialog.message}")


# Event event listener for handling confirm dialog box
def handle_confirm_dismiss_dialog_box(dialog):
   asyncio.ensure_future(dialog.dismiss())
   print(f"Dialog message: {dialog.message}")


# Event event listener for handling prompt dialog box
def handle_confirm_prompt_dialog_box(dialog):
   asyncio.ensure_future(dialog.accept(test_message))
   print(f"Dialog message: {dialog.message}")


@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_handling_js_alerts(page):
   await page.goto(dialog_test_url)


   # Can be changed with non-blocking sleep
   await asyncio.sleep(1)


   page.on('dialog', handle_js_dialog_box)


   elem_alert = await page.querySelector(loc_alert_arr[0])


   # Click on the located element
   await elem_alert.click()


   # Wait for the event loop to process events
   await asyncio.sleep(2)


@pytest.mark.asyncio
@pytest.mark.order(2)
async def test_handling_confirm_accept_alerts(page):
   await page.goto(dialog_test_url)


   # Can be changed with non-blocking sleep
   await asyncio.sleep(1)


   page.on('dialog', handle_confirm_accept_dialog_box)


   # Confirm Alert
   elem_alert = await page.querySelector(loc_alert_arr[1])


   # Click on the located element
   await elem_alert.click()


   # Wait for the event loop to process events
   await asyncio.sleep(2)


@pytest.mark.asyncio
@pytest.mark.order(3)
async def test_handling_confirm_dismiss_alerts(page):
   await page.goto(dialog_test_url)


   # Can be changed with non-blocking sleep
   await asyncio.sleep(1)


   page.on('dialog', handle_confirm_dismiss_dialog_box)


   await asyncio.sleep(2)


   # Dismiss Alert
   elem_alert = await page.querySelector(loc_alert_arr[1])


   # Click on the located element
   await elem_alert.click()


   # Wait for the event loop to process events
   await asyncio.sleep(2)


@pytest.mark.asyncio
@pytest.mark.order(4)
async def test_handling_prompt_alerts(page):
   await page.goto(dialog_test_url)


   # Can be changed with non-blocking sleep
   await asyncio.sleep(1)


   page.on('dialog', handle_confirm_prompt_dialog_box)


   await asyncio.sleep(1)


   # Prompt Alert
   elem_alert = await page.querySelector(loc_alert_arr[2])


   # Click on the located element
   await elem_alert.click()


   page.on('dialog', handle_confirm_dismiss_dialog_box)


   await asyncio.sleep(2)

Code Walkthrough

Four separate event listeners are created for automating interactions with the dialog boxes:

Let’s deep dive into different test scenarios bifurcated based on the interactions they have with the respective alert box.

Test Method: test_handling_js_alerts()

After navigating to the LambdaTest Alert Demo website, the page.on() *method in Pyppeteer is used for attaching event listeners to the current page. The syntax of the *page.on() method is below:

await page.on(event, callback)

– event: Event name (string) to listen for.
– callback: Callback function to be executed when the specified event fires.

Since dialog objects are dispatched by the page via the dialog event, the method listens to that particular event. The callback function in the current scenario is handle_js_dialog_box(dialog).

Here is the implementation of the callback function:

The asyncio.ensure_future() method of the asyncio module is used for background execution of the accept() method. In short, when the callback function is fired, it accepts the dialog box. The message() method of the dialog class prints the message attached to the current dialog box.

Next, locate the Click Me button associated with JavaScript Alerts on the page.

Since the element is located using the CSS Selector, we use the querySelector() method to get the element (i.e. elem_alert) matching that locator.

Finally, the click() method of the button element is invoked so that it opens up the dialog box.

With this, the dialog event is also fired, after which the respective callback function [i.e., handle_js_dialog_box(dialog)] is executed non-blocking.

Test Method: test_handling_confirm_accept_alerts()

Like before, the page.on() method in Pyppeteer is used for attaching event listeners to the current page.

Here is the implementation of handle_confirm_accept_dialog_box():

Next, locate the Click Me button associated with the Confirm box on the page.

Like earlier, the click() method of the button element is invoked; after which the respective callback function [i.e., test_handling_confirm_accept_alerts(dialog)] is executed in a non-blocking manner.

Test Method: test_handling_confirm_dismiss_alerts()

Like before, the page.on() method in Pyppeteer is used for attaching event listeners to the current page.

Since the dialog box will be dismissed, the dismiss() method of the Dialog class is invoked in the callback function.

Next, locate the Click Me button associated with the Confirm box on the page.

Like earlier, the click() method of the button element is invoked, after which the respective callback function [i.e., test_handling_confirm_dimiss_alerts(dialog)] is executed in a non-blocking manner.

Test Method: test_handling_prompt_alerts()

Like before, the page.on() method in Pyppeteer is used for attaching event listeners to the current page.

Since there is a text message that needs to be entered in this prompt box, the respective message (i.e., test_message) is passed to the accept() method.

The Click Me button associated with the Prompt box uses the CSS Selector property. The respective callback function [i.e., handle_confirm_dismiss_dialog_box(dialog)] is executed once the dialog box appears after the click operation on the button element.

Execution

Invoke the command make pyppeteer-dialog-box on the terminal with the Chromium browser instantiated on the local machine. As seen below, the test execution is successful.

Shown below are the execution snapshots that indicate that the interactions with the dialog (or alert) boxes were successful.

Execution: Handling of Alert box

Execution: Handling of Confirm box (Accept)

Execution: Handling of Confirm box (Dismiss)

Execution: Handling of Prompt box (promptText)

Though alerts that open up a dialog box, popups (or pop-ups) are mere window(s) that appear on top of the existing content of the page. Automating interactions with popups involves locating the window using appropriate locators (i.e., CSS Selector, XPath.

After that, we use appropriate coroutines (i.e., waitForXPath, waitForSelector) to detect the presence of the popup element. Once detected, you can interact with it by clicking buttons or performing other actions.

Learn to implement Explicit Wait command in Selenium WebDriverWait class in Java. Improve web testing by precisely waiting for elements!

Handling dynamic content with Pyppeteer

Most modern-age websites (including SPAs) leverage JavaScript for loading and updating content on the page. AJAX (Asynchronous JavaScript and XML) retrieves data from the server and updates relevant sections (or parts) on the page. This means that the content on the page is loaded with a reading of the entire page.

Not only content, the WebElements can also be dynamic. These WebElements are invoked at run-time and dynamically added to the page. It is important to note that there is a difference between dynamic elements and hidden elements (display: none, visibility: hidden).

A WebElement can never be hidden as well as dynamic. For instance, a web page could have a collapsed dropdown element (or menu) that becomes visible dynamically based on the interactions with the element. Handling dynamic dropdown elements with Selenium, Pyppeteer, and other frameworks (or libraries) needs to be in an automation engineer’s arsenal!

For instance, YouTube is a prominent website that leverages dynamic loading of content to showcase video content to its end-users. As seen below, content (including videos, and meta-data) on the LambdaTest YouTube channel is loaded dynamically when the user performs a scroll operation.

YouTube: Dynamic Content Example

For a demonstration of dynamic content handling with Pyppeteer, we would be automating interactions with WebElements on the following websites:

LambdaTest eCommerce Playground
Scraping Club Infinite Scroll

Along with dynamically loaded content, the LambdaTest eCommerce Playground also lazy loaded images for better website performance.

Lazy Loading of images

Demonstration

For demonstrating dynamic content handling with Pyppeteer, we automate the following test scenario on Chrome installed on a local machine (EXEC_PLATFORM = local) or LambdaTest cloud grid (EXEC_PLATFORM = cloud)

Test Scenario 1

Navigate to LambdaTest eCommerce Playground.
Scroll into the Nikon D300 Product to be added in the Cart.
Assert if the target URL does not match the expected URL.

Test Scenario 2

Navigate to LambdaTest eCommerce Playground.
Click on the third tab in the carousel.
Assert if the target URL does not match the expected URL.

Test Scenario 3

Navigate to Scraping Club Infinite Scroll.
Click on the Short Chiffon Dress product.
Assert if the target URL does not match the expected URL.

Test Scenario 4

Navigate to Scraping Club Infinite Scroll
Scroll to the Top with Tie product.
Assert if the target URL does not match the expected URL.

Though all four test scenarios appear similar, the difference lies in how the content (including images) is presented on the website. In one of the scenarios, we would also be demonstrating scroll operations that come in handy when automating interactions with dynamically loaded content.

Implementation

Here is the implementation of all the test scenarios. We will be dissecting the code in further sections of the blog!

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


test1_url = 'https://ecommerce-playground.lambdatest.io/'
test2_url = 'https://scrapingclub.com/exercise/list_infinite_scroll/'


# Usecase - 1
# loc_ecomm_1 = ".order-1.col-lg-6 div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) div:nth-of-type(1) > img:nth-of-type(1)"
loc_ecomm_1 = "[aria-label='1 / 2'] div:nth-of-type(1) > [alt='Nikon D300']"
target_url_1 = "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&product_id=63"


# Usecase - 2 (Click on e-commerce sliding banner)
loc_ecomm_2 = "[alt='Canon DSLR camera']"
target_url_2 = "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&product_id=30"


# Usecase - 3 Automating interactions on https://scrapingclub.com/exercise/list_infinite_scroll/
loc_infinite_src_prod1 = ".grid .p-4 [href='/exercise/list_basic_detail/93926-C/']"
target_url_3 = "https://scrapingclub.com/exercise/list_basic_detail/93926-C/"


# Usecase - 4 Automating interactions on https://scrapingclub.com/exercise/list_infinite_scroll/
# when the images are lazy loaded
loc_infinite_src_prod2 = "div:nth-of-type(31) > .p-4 [href='/exercise/list_basic_detail/94967-A/']"
target_url_4 = "https://scrapingclub.com/exercise/list_basic_detail/94967-A/"


# Set timeout in ms
timeOut = 60000


async def scroll_to_element(page, selector):
   # Scroll until the element is detected
   await page.evaluateHandle(
       '''async (selector) => {
           const element = document.querySelector(selector);
           if (element) {
               element.scrollIntoView();
           }
       }''',
       selector
   )


   return selector


async def scroll_carousel(page, scr_count):
   for scr in range(1, scr_count):
       elem_next_button = "#mz-carousel-213240 > ul li:nth-child(" + str(scr) + ")"
       await asyncio.sleep(1)
       elem_next_button = await page.querySelector(elem_next_button)
       await elem_next_button.click()


# Replica of https://github.com/hjsblogger/web-scraping-with-python/blob/
# main/tests/beautiful-soup/test_infinite_scraping.py#L67C5-L80C18


async def scroll_end_of_page(page):
   start_height = await page.evaluate('document.documentElement.scrollHeight')


   while True:
       # Scroll to the bottom of the page
       await page.evaluate(f'window.scrollTo(0, {start_height})')


       # Wait for the content to load
       await asyncio.sleep(1)


       # Get the new scroll height
       scroll_height = await page.evaluate('document.documentElement.scrollHeight')


       if scroll_height == start_height:
           # If heights are the same, we reached the end of the page
           break


       # Add an additional wait
       await asyncio.sleep(2)


       start_height = scroll_height


   # Additional wait after scrolling
   await asyncio.sleep(2)


@pytest.mark.asyncio
@pytest.mark.order(1)
async def test_lazy_load_ecomm_1(page):


   # The time out can be set using the setDefaultNavigationTimeout
   # It is primarily used for overriding the default page timeout of 30 seconds
   page.setDefaultNavigationTimeout(timeOut)
   await page.goto(test1_url,
       {'waitUntil': 'load', 'timeout': timeOut})

   # Set the viewport - Apple MacBook Air 13-inch
   # Reference - https://codekbyte.com/devices-viewport-sizes/
   # await page.setViewport({'width': 1440, 'height': 770})


   await asyncio.sleep(2)


   if exec_platform == 'local':
       # Scroll until the element is detected
       elem_button = await scroll_to_element(page, loc_ecomm_1)


       # await page.click(elem_button)


       # Wait until the page is loaded
       # https://miyakogi.github.io/pyppeteer/reference.html#pyppeteer.page.Page.waitForNavigation
       navigationPromise = asyncio.ensure_future(page.waitForNavigation())
       await page.click(elem_button)
       await navigationPromise
   elif exec_platform == 'cloud':
       elem_button = await page.waitForSelector(loc_ecomm_1, {'visible': True})
       await asyncio.gather(
           elem_button.click(),
           page.waitForNavigation({'waitUntil': 'networkidle2', 'timeout': 30000}),
       )

   # Assert if required, since the test is a simple one; we leave as is :D
   current_url = page.url
   print('Current URL is: ' + current_url)


   try:
       assert current_url == target_url_1
       print("Test Success: Product checkout successful")
   except PageError as e:
       print("Test Failure: Could not checkout Product")
       print("Error Code" + str(e))


@pytest.mark.asyncio
@pytest.mark.order(2)
async def test_lazy_load_ecomm_2(page):
   carousel_len = 4


   # The time out can be set using the setDefaultNavigationTimeout
   # It is primarily used for overriding the default page timeout of 30 seconds
   page.setDefaultNavigationTimeout(timeOut)
   await page.goto(test1_url,
       {'waitUntil': 'load', 'timeout': timeOut})

   # Set the viewport - Apple MacBook Air 13-inch
   # Reference - https://codekbyte.com/devices-viewport-sizes/
   # await page.setViewport({'width': 1440, 'height': 770})


   await asyncio.sleep(2)


   # Approach 1: Directly click on the third button on the carousel
   # elem_carousel_banner = await page.querySelector("#mz-carousel-213240 > ul li:nth-child(3)")
   # await asyncio.sleep(1)
   # await elem_carousel_banner.click()


   # Approach 2 (Only for demo): Serially click on every button on carousel
   await scroll_carousel(page, carousel_len)

   await asyncio.sleep(1)


   # elem_prod_1 = await page.querySelector(loc_ecomm_2)
   elem_prod_1 = await page.waitForSelector(loc_ecomm_2, {'visible': True})
   await asyncio.gather(
       elem_prod_1.click(),
       page.waitForNavigation({'waitUntil': 'networkidle2', 'timeout': 60000}),
   )

   # Assert if required, since the test is a simple one; we leave as is :D
   current_url = page.url
   print('Current URL is: ' + current_url)


   try:
       assert current_url == target_url_2
       print("Test Success: Product checkout successful")
   except PageError as e:
       print("Test Failure: Could not checkout Product")
       print("Error Code" + str(e))




@pytest.mark.asyncio
@pytest.mark.order(3)
async def test_lazy_load_infinite_scroll_1(page):
   # The time out can be set using the setDefaultNavigationTimeout
   # It is primarily used for overriding the default page timeout of 30 seconds
   page.setDefaultNavigationTimeout(timeOut)
   await page.goto(test2_url,
       {'waitUntil': 'load', 'timeout': timeOut})

   # Set the viewport - Apple MacBook Air 13-inch
   # Reference - https://codekbyte.com/devices-viewport-sizes/
   # await page.setViewport({'width': 1440, 'height': 770})


   await asyncio.sleep(1)


   elem_prod1 = await page.querySelector(loc_infinite_src_prod1)


   await asyncio.gather(
       elem_prod1.click(),
       page.waitForNavigation({'waitUntil': 'networkidle2', 'timeout': 60000}),
   )


   # await asyncio.sleep(1)
   # await elem_carousel_banner.click()


   # elem_button = scroll_to_element(page, loc_infinite_src_prod1)
   # print(elem_button)
   # await asyncio.sleep(2)
   # await elem_button.click()

   # Assert if required, since the test is a simple one; we leave as is :D
   current_url = page.url
   print('Current URL is: ' + current_url)


   try:
       assert current_url == target_url_3
       print("Test Success: Product checkout successful")
   except PageError as e:
       print("Test Failure: Could not checkout Product")
       print("Error Code" + str(e))

@pytest.mark.asyncio
@pytest.mark.order(4)
async def test_lazy_load_infinite_scroll_2(page):
   # The time out can be set using the setDefaultNavigationTimeout
   # It is primarily used for overriding the default page timeout of 30 seconds
   page.setDefaultNavigationTimeout(timeOut)


   # Tested navigation using LambdaTest YouTube channel


   # await page.goto("https://www.youtube.com/@LambdaTest/videos",
   await page.goto(test2_url,
       {'waitUntil': 'load', 'timeout': timeOut})

   # Set the viewport - Apple MacBook Air 13-inch
   # Reference - https://codekbyte.com/devices-viewport-sizes/
   # await page.setViewport({'width': 1440, 'height': 770})


   await asyncio.sleep(1)


   await scroll_end_of_page(page)


   await page.evaluate('window.scrollTo(0, 0)')


   await asyncio.sleep(1)


   # elem_prod = await page.querySelector(loc_infinite_src_prod2)


   # asyncio.sleep(1)


   # await asyncio.gather(
   #     elem_prod.click(),
   #     page.waitForNavigation({'waitUntil': 'load', 'timeout': 60000}),
   # )


   elem_button = await scroll_to_element(page, loc_infinite_src_prod2)


   await asyncio.sleep(1)


   # await page.click(elem_button)


   await asyncio.gather(
       page.click(elem_button),
       page.waitForNavigation({'waitUntil': 'networkidle2', 'timeout': 60000}),
   )


   # Assert if required, since the test is a simple one; we leave as is :D
   current_url = page.url
   print('Current URL is: ' + current_url)


   try:
       assert current_url == target_url_4
       print("Test Success: Product checkout successful")
   except PageError as e:
       print("Test Failure: Could not checkout Product")
       print("Error Code" + str(e))

Code Walkthrough (Test Scenario — 1)

In the test *test_lazy_load_ecomm_1(), we first navigate to the test URL using the *goto() method. The navigation timeout is set to 60000 ms, overriding the default timeout of 30000 ms.

Once the page is loaded, we use the querySelector() method to get the element matching the specified CSS Selector.

Once the element is located, the scrollIntoView() method of the Element’s interface (in JavaScript) is used to scroll into view of the specified element.

The asyncio.ensure_future() method of the asyncio module is used to convert the promise (i.e., navigationPromise) returned by waitForNavigation() into an asynchronous task.

The click() method clicks on the element in the previous step. Finally, await navigationPromise waits for the completion of the navigation operation (i.e., the page would have loaded completely by the end of this step).

Assert if the post-navigation URL does not match with the target URL.

Code Walkthrough (Test Scenario — 2)

After navigating to the test URL, we invoke the user-defined scroll_carousel() method that takes two input parameters — page instance & carousel count (i.e., carousel_len = 4).

As shown below, the carousel contains 3 items, our target element is located in the final scroll.

Here is the implementation of the scroll_carousel() method:

The end count of the carousel is set to 4. Hence, the for loop executes in the 1..4 range. The **next **button on carousel is located using the CSS Selector:

Button 1: #mz-carousel-213240 > ul li:nth-child(1)
Button 2: #mz-carousel-213240 > ul li:nth-child(2)
Button 3: #mz-carousel-213240 > ul li:nth-child(3)

At each step, the click() method on the located button element invokes the click operation. Since the loop runs from 1 through 3, the final click is performed on the last item (or button) in the carousel.

Now that we are at the target location in the carousel, the element is located via the CSS Selector. The option visible is set to True so that the waitForSelector()
method waits for the located element to be visible on the page.

Finally, the asyncio.gather() of the asyncio library is called for executing the click() method on the located element and waiting for the navigation to complete [i.e., waitForNavigation() ].

Like before, an assert is raised if the current URL does not match with the target URL.

Code Walkthrough (Test Scenario — 3)

After navigating to the test URL, we locate the element via the CSS property — .grid .p-4 [href=’/exercise/list_basic_detail/93926-C/’]. The querySelector() *method returns the element (*i.e., elem_prod1) matching the selector.

The click() method on elem_prod1 performs a click on the element. As always, we wait for a maximum of 60000 ms for the navigation to complete.

Code Walkthrough (Test Scenario — 4)

In this test scenario, the target image (or element) is lazy-loaded and available only after 2~3 scrolls.

After the test URL is loaded, the next step is to ensure that all the content on the page has loaded completely. For this, we perform a vertical scroll operation till the end of the page is reached. The logic of scrolling a page in Selenium is very similar to that used in Pyppeteer!

For vertical scrolling, we have created a user-defined method named scroll_end_of_page(). I have ported the code from my existing implementation, which I used for my other web scraping blog. 🙂

Once the page is loaded (in maximized mode), we first get the scrollable height using the JavaScript function document.documentElement.scrollHeight. The JavaScript logic is executed using the page.evaluate() method.

Next, a While loop is run where a vertical scroll is performed using the Window.scrollTo() method (in JS) with document.documentElement.scrollHeight as the input argument. Since it is a JavaScript function, it is executed using the evaluate() method of the *Page *class.

To witness the Window.scrollTo() method in action, open the Test URL in the browser. Then trigger the following commands in the browser console:

document.documentElement.scrollHeight
window.scrollTo(0, document.documentElement.scrollHeight)

The above two actions are performed till we reach the end of the document (or page). This is when we break from the while loop!

Now that the page load is complete, we scroll to the top of the page by executing the JS function window.scrollTo(0, 0) *via the *evaluate() method of Pyppeteer.

Next, we locate the target element using the CSS Selector div:nth-of-type(31) > .p-4 [href=’/exercise/list_basic_detail/94967-A/’] and scroll into the view using the user-defined function scroll_to_element().

Implementation of scroll_to_element() method

Finally, a click is initiated on the element (i.e., elem_button) located in the earlier step. As usual, the waitForNavigation() helps in waiting for the page navigation to complete.

The current page URL is obtained via the page.url attribute. An assert is raised if the URL does not match with the expected URL!

Execution

Invoke the command make pyppeteer-dynamic-content on the terminal with the Chromium browser instantiated on the local machine (EXEC_PLATFORM = local). You can also perform web scraping using Chromium (or Chrome) on the LambdaTest cloud grid (EXEC_PLATFORM = cloud).

As seen below, all four test scenarios are executed in parallel using the *pytest-xdist* plugin for parallel execution with pytest & Pyppeteer.

The execution snapshots of the test scenarios are below:

Execution: Test Scenario — 1

Execution: Test Scenario — 2

Execution: Test Scenario — 3

Execution: Test Scenario — 4

We also executed the same tests on the LambdaTest Grid and the execution was successful!

Shown below are the execution screenshots from LambdaTest Automation Dashboard:

Parallel Test Execution (In Progress)

Test Execution (Completion)

Now that we have introduced the nuances of parallel testing in this section let’s do a detailed deep-dive in the further sections of the blog!

Web scraping with Pyppeteer

Python is one of the most prominent languages used extensively for web scraping. For starters, web scraping uses automated tools (or libraries) to extract meaningful information from websites.

Competitor analysis, Data analysis, and Lead generation are some of the main uses of web scraping. Apart from Pyppeteer, Selenium, and Beautiful Soup can also scrap static and dynamic web content. If you want to learn about the fine nuances of web scraping, please refer to this detailed blog that deep-dives into web scraping using Python.

For demonstration web scraping with Pyppeteer, I would be porting scraping logic that was used for scraping product content from LambdaTest eCommerce Playground.

Demonstration

As mentioned above, we would be scraping product meta-data (i.e., Name, Price, and Image Link) from the eCommerce website.

LambdaTest E-Commerce Playground

The scraping logic with Pyppeteer can be executed on local Chromium (i.e., EXEC_PLATFORM=local) as well as Chrome/Chromium on LambdaTest Cloud Grid (i.e., EXEC_PLATFORM=cloud).

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
import sys
from os import environ
from pyppeteer import connect, launch


test_url = 'https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57'


@pytest.mark.asyncio
async def test_ecommerce_scraping(page):
   for iteration in range(1,6):
       meta_data_arr = []


       curr_test_url = test_url + "&page=" + str(iteration)
       meta_data_arr = await scrap_ecommerce(page, curr_test_url)
       print('\n')
       print("Product Page = " + curr_test_url)
       print("*********************************************************************************************************\n")
       await print_scrapped_content(meta_data_arr)


async def scrap_ecommerce(page, curr_test_url) -> list:
   await page.goto(curr_test_url, {'waitUntil': 'domcontentloaded'})


   rows = await page.querySelectorAll('.product-layout.product-grid.no-desc.col-xl-4.col-lg-4.col-md-4.col-sm-6.col-6')


   meta_data_arr = []
   # Extract information from the selected elements
   for row in rows:
       link = await row.querySelector('a.carousel.d-block.slide')
       name = await row.querySelector('h4.title')
       price = await row.querySelector('span.price-new')


       link_href = await page.evaluate('(element) => element.getAttribute("href")', link)
       product_name = await page.evaluate('(element) => element.textContent', name)
       product_price = await page.evaluate('(element) => element.textContent', price)


       # Create a dictionary of the meta-data of the items on e-commerce store
       meta_data_dict = {
           'product link': link_href,
           'product name': product_name,
           'product price': product_price
       }


       meta_data_arr.append(meta_data_dict) 

   return meta_data_arr


# # Pagination - 1:5
# # Page 1: https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57&page=1
# # Page 5: https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57&page=5


# Replica of https://github.com/hjsblogger/web-scraping-with-python/blob/main/pageobject/helpers.py#L146
async def print_scrapped_content(meta_data):
   for elem_info in meta_data:
       print(elem_info)

Code Walkthrough

To get started, we set up the test URL that comprises of the base URL followed by the page number (i.e. &page=< page-number >).

As seen above, there are a total of 5 pages in the product category. Hence, the scraping implementation is executed in an iterative loop [from 1 .. 6].

Here are the two main coroutines (or methods) that are used in scraping the test website:

*scrap_ecommerce()* — Method that scraps content [or meta-data] from the current URL and stores it in a list
*print_scrapped_content() *— Prints the content scrapped by the scrap_ecommerce() method

Let’s look at each of them in more detail!

The scrap_ecommerce() method takes two parameters:

page — browser page that is created using the newPage() method
curr_test_url — URL (example) from which the content needs to be scrapped using Pyppeteer

The goto() method takes the test URL as the input parameter. Along with it, the waitUntil option is set to *domcontentloaded *(i.e. wait for a maximum of 30000 ms till the firing of the *DOMContentLoaded *event).

The product page contains 15 products, where the product meta-data is within a common CSS Selector
(.product-layout.product-grid.no-desc.col-xl-4.col-lg-4.col-md-4.col-sm-6.col-6)

Hence, 15 elements (on every product page) match the element located using the above CSS Selector. The querySelectorAll() method of the Page class returns a list that contains elements matching the provided CSS Selector. The list will be further used to iteratively scrap information (i.e., name, cost) of each product.

Next, we run a for *loop (1 .. 16) to scrap information of all the 15 products (or elements) under the *div located in the previous step.

The product link is obtained by locating the respective element using the querySelector() method. As seen below, the first argument is the tag that must be searched for (i.e., a — anchor tag), and the second is the CSS *Class *attribute.

Now that we have located the element, the link (or href) to the product page is obtained by executing a JS-function (on browser) via the evaluate() method of the Page class.

The JS function uses the arrow function syntax and takes a parameter named element. The getAttribute() method of the Element interface returns the value of the href attribute of the element.

The product name is also scraped by first locating the respective element using the querySelector() method. The first argument is the h4 tag, and the second argument is the Class Name locator title.

Once the element is located, the text content is obtained using the JavaScript method — textContent() on the located element (i.e., element.textContent). It uses the arrow function syntax where the element (i.e., name) is passed as an input parameter.

Lastly, the price of the respective product is scraped by first locating the element using the querySelector() method. As seen below, the text under the element with Class Name price-new provides the product price.

Like before, the text content is obtained using the JavaScript method — textContent() (or element.textContent). It uses the arrow function syntax where the element (i.e., price) is passed as an input parameter.

Now that we have scraped the required information (or meta-data), a dictionary (i.e., meta_data_dict) is created and appended to the list (i.e., meta_data_arr).

The above-mentioned steps are repeated for all the other product pages (i.e., Product Page 1 → Product Page 5), and the scraped data is displayed on the screen.

Execution

Invoke the command make pyppeteer-web-scraping on the terminal with the Chromium browser instantiated on the local machine (EXEC_PLATFORM = local). You can also perform web scraping using Chromium (or Chrome) on the LambdaTest cloud grid (EXEC_PLATFORM = cloud).

As seen below, the Chrome browser was successfully instantiated on the local machine.

Here are the screenshots of the scrapped content of Product Page 1 and Product Page 5.

With this, we have successfully scraped a website using Pyppeteer! As always, use web scraping with utmost caution and responsibility. 🙂

Parallel execution with Pyppeteer

Pyppeteer does not have built-in support for parallel test execution. However, tests can be run parallel with Pyppeteer by leveraging other test automation frameworks (or libraries) offering support.

Before you parallelize the tests, it is important to follow the test execution best practices, the most important being test isolation (or independent tests).

In the section where we demonstrated dynamic content handling with Pyppeteer, we used the pytest plugin pytest-xdist to trigger the tests in parallel. If you are new to pytest, check out the pytest tutorial that deep-dives into the basic nitty-gritty of the framework.

The video below shows how to use the pytest-xdist plugin with Selenium, but the learnings also apply to Pyppeteer!

You can subscribe to the LambdaTest YouTube Channel for more tutorials on Selenium testing, Playwright testing, Cypress testing, and more.

pytest-parallel is another popular pytest plugin that can be used instead of pytest-xdist. The major advantage of the pytest-parallel plugin is its thread-safe approach and improved performance due to the usage of non-blocking IO for HTTP requests. Though we could have also chosen unittest (or PyUnit), features like fixtures, parameterized testing, and advanced assertions make pytest the de-facto choice for parallel testing.

As a part of the installation, we had already installed the pytest-xdist plugin via requirements.txt

pytest
pyppeteer
pytest-asyncio
pytest-xdist
pytest-order
py

Demonstration

For demonstrating parallel execution with Pyppeteer using pytest, we have created two Python files that have their implementation of fixtures and tests. Setting the EXEC_PLATFORM to local lets you run tests in parallel on the local machine, whereas setting EXEC_PLATFORM to cloud runs tests on the LambdaTest cloud grid.

Since the overall implementation steps remain largely unchanged, we would be avoiding code walkthrough for this section!

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


cloud_capabilities = {
   'browserName': 'chrome',
   'browserVersion': 'latest',
   'LT:Options': {
       'platform': 'Windows 11',
       'build': '[Build] Duckduckgo Search using Pyppeteer',
       'name': 'Duckduckgo Search using Pyppeteer',
       'resolution': '1920x1080',
       'user': username,  # Replace with your LT_USERNAME
       'accessKey': access_key,  # Replace with your LT_ACCESS_KEY
       'network': True,
       'video': True,
       'console': True,
       'headless': False
   }
}


@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'local':
       browser = await launch(headless = False, args=['--start-maximized'])
   elif exec_platform == 'cloud':
       capability = quote(json.dumps(cloud_capabilities))
       print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


       browser = await connect(
           browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
       )
   yield browser
   await asyncio.sleep(1)   


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()
   yield page

   await page.close()
   await asyncio.sleep(1)
   await browser.close()


@pytest.mark.usefixtures('page')


@pytest.mark.asyncio
async def test_search_1(page):
   # asyncio.set_event_loop(asyncio.new_event_loop())
   await page.goto('https://www.duckduckgo.com')
   # Maximize the page
   await page.setViewport({'width': 1920, 'height': 1080})
   element = await page.querySelector('[name="q"]')
   await element.click()
   await element.type('LambdaTest')
   await asyncio.gather(
       page.keyboard.press('Enter'),
       page.waitForNavigation()
   )


   await asyncio.sleep(1)


   title = await page.title()


   try:
       assert title == 'LambdaTest at DuckDuckGo', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   await asyncio.sleep(1)


   return title

import asyncio
import pytest
from pyppeteer.errors import PageError
from urllib.parse import quote
import json
import os
from os import environ
from pyppeteer import connect, launch


exec_platform = os.getenv('EXEC_PLATFORM')


# Get username and access key of the LambdaTest Platform
username = environ.get('LT_USERNAME', None)
access_key = environ.get('LT_ACCESS_KEY', None)


cloud_capabilities = {
   'browserName': 'chrome',
   'browserVersion': 'latest',
   'LT:Options': {
       'platform': 'Windows 10',
       'build': '[Build] Brave Search using Pyppeteer',
       'name': 'Brave Search using Pyppeteer',
       'resolution': '1920x1080',
       'user': username,  # Replace with your LT_USERNAME
       'accessKey': access_key,  # Replace with your LT_ACCESS_KEY
       'geoLocation': 'US',
       'network': True,
       'video': True,
       'console': True,
       'headless': False
   }
}


@pytest.fixture(scope='function')
async def browser():
   if exec_platform == 'local':
       browser = await launch(headless = False, args=['--start-maximized'])
   elif exec_platform == 'cloud':
       capability = quote(json.dumps(cloud_capabilities))
       print('Initializing test:: ', cloud_capabilities['LT:Options']['name'])


       browser = await connect(
           browserWSEndpoint=f'wss://cdp.lambdatest.com/puppeteer?capabilities={capability}'
       )
   yield browser
   await asyncio.sleep(1)


# Pytest fixture for page setup
@pytest.fixture(scope='function')
async def page(browser):
   page = await browser.newPage()
   yield page

   await page.close()
   await asyncio.sleep(1)
   await browser.close()


@pytest.mark.usefixtures('page')       
@pytest.mark.asyncio
async def test_search_2(page):
   await page.goto('https://search.brave.com')

   # Maximize the page
   await page.setViewport({'width': 1920, 'height': 1080})

   element = await page.querySelector('#searchbox')
   await element.click()
   await element.type('LambdaTest')
   await asyncio.gather(
       page.keyboard.press('Enter'),
       page.waitForNavigation()
   )


   await asyncio.sleep(1)


   title = await page.title()


   try:
       assert title == 'LambdaTest - Brave Search', 'Expected page title is incorrect!'
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "passed", "remark": "Title matched" } })}')
   except PageError as e:
       await page.evaluate('_ => {}', f'lambdatest_action: {json.dumps({ "action": "setTestStatus", "arguments": { "status": "failed", "remark": str(e) } })}')


   await asyncio.sleep(1)


   return title

Execution

Invoke the command make pytest-pyppeteer on the terminal to trigger the execution. As seen in the execution snapshot on the local machine, the -n 2 option starts two processes in parallel, with tests in both files executing in separate processes.

It is important to note that tests in separate files are executed in parallel, whereas multiple tests in the same file run in a serial manner.

Here is the browser output, which indicates that the tests were executed successfully.

Execution — Test Scenario: 1

Execution — Test Scenario: 2

You can find the LambdaTest username and access key in the LambdaTest Password & Security page. Shown below is the execution on the LambdaTest cloud, which was triggered by setting EXEC_PLATFORM to cloud.

As seen on the dashboard, the tests in both the Python files are running in parallel.

As seen below, the test execution was successful.

Execution on LambdaTest — Test Scenario: 1

Execution on LambdaTest — Test Scenario: 2

Difference between Pyppeteer and Puppeteer

As stated in the official Pyppeteer documentation, Pyppeteer is an unofficial port of Puppeteer. Both frameworks provide high-level APIs that let you interact with the Elements in a document (or page) when opened on Chrome (or Chromium browsers).

Language-specific differences

Python-based Pyppeteer & JavaScript-based Puppeteer are very much similar, barring aside some high-level differences. For the Pyppeteer demonstration on LambdaTest, we used the endpoint that is also used for Puppeteer:

Since Pyppeteer is based on Python, it leverages the asyncio library for writing concurrent code using the async/await syntax. As Puppeteer is based on JavaScript, it leverages Promises that are objects representing the completion (or failure) of an asynchronous operation.

Keyword arguments for options

As seen so far, Pyppeteer accepts both dictionary & keyword arguments for options.

On the other hand, Puppeteer uses object for passing options to methods.

The evaluate() method

The page.evaluate() method in Pyppeteer takes a string of JavaScript.

On the other hand, the page.evaluate() method in Puppeteer takes JavaScript raw function (or string of JavaScript expression).

There are a few more differences between Pyppeteer and Puppeteer, I recommend going through the Pyppeteer vs Puppeteer comparison for more information. Even though the Pyppeteer project is no longer under maintenance, it is still used by the community!

If you are looking for options, you can switch to other frameworks like Puppeteer or Selenium. However, the choice depends on the project complexity and technical expertise of the said library (or framework).

It’s A Wrap

Thanks for making it this far! In this super-exhaustive Python tutorial with Puppeteer, we deep-dived into almost all the use cases (or scenarios) that can be realized with the Pyppeteer library. Like other Python-based test automation frameworks like pytest, unittest, etc., Pyppeteer can be leveraged for web automation and scraping of pages.

Lastly, switching (or porting) from Pyppeteer to Puppeteer/Selenium should be considered in scenarios where you want to harness the potential the other frameworks (or libraries) offer. You can also leverage Pyppeteer on LambdaTest since it lets you run tests at scale, that too on different versions of Chrome (or Chromium).

The integration of Pyppeteer with LambdaTest provides a seamless environment for executing scripts, ensuring compatibility testing on a diverse set of browser versions. This combination not only enhances the scalability of your testing but also allows you to validate the performance and functionality of your applications in a wide range of browser environments. LambdaTest’s infrastructure, combined with Pyppeteer’s capabilities, provides a robust solution for efficient and comprehensive web application testing.

Happy Testing 🙂

Frequently Asked Questions (FAQs)

What is Pyppeteer in Python?

Pyppeteer is a Python library that provides a high-level API to control headless browsers using the Chrome DevTools Protocol. It is essentially a Python port of the popular Node library Puppeteer, which is maintained by the Chrome team at Google.

What is the difference between Pyppeteer and Puppeteer?

Pyppeteer and Puppeteer are sibling libraries designed for different programming languages, Python and JavaScript, respectively. Yet, they aim to provide a high-level interface to control headless browsers through the Chrome DevTools Protocol.

Puppeteer, developed by Google for Node.js, has been widely adopted in the JavaScript community, offering features like web scraping and automated testing. On the other hand, Pyppeteer is the Python adaptation of Puppeteer, allowing Python developers to leverage similar capabilities using Python syntax and asyncio. Despite their language differences, both libraries empower developers to automate tasks in headless browsers effectively.

Selenium MSTest Tutorial: Setup Selenium WebDriver For MSTest Framework In C#

himanshuseth004 — Thu, 28 Dec 2023 06:32:43 +0000

In the on-going ‘Selenium MSTest testing tutorial’ series, we earlier had a look at setting up the MSTest framework in Visual Studio. It was a getting started guide with a major focus on the installation of the Selenium MSTest framework and MSTest adapter for the project. In case you are starting up with the MSTest framework, we recommend that you check out the installation guide on MSTest Tutorial: Environment Setup For Selenium Testing.

In this Selenium MSTest testing tutorial, we take a look at setting up Selenium WebDriver with Visual Studio in C#. Before we install the Selenium WebDriver, we create a new project in C#.

Starting your journey with Selenium WebDriver? Check out this step-by-step guide to perform Automation testing using Selenium WebDriver Tutorial.

*Need to convert hex to decimal? Our online Hex to Decimal Converter tool converts hexadecimal to decimal numbers quickly. Get your conversions done in no time. *

Creating a New Project in C

Before installing Selenium WebDriver, we create a new project in C# by following the below-mentioned steps:

1. Open Visual Studio and create a new project of the type ‘MSTest Test Project (.Net Core).’

As the created project is of type MSTest Test Project (.Net Core), the default C# class comes along with the attributes [TestMethod] and [TestClass] in it.

Steps to Download Selenium WebDriver

Before running your first script in MSTest, you need to download and set up Selenium WebDriver.

Selenium WebDriver on Visual Studio can be installed using NuGet, a free and open-source package manager that is specifically designed for the Microsoft Platform.
There are two options for installing Selenium WebDriver — using the Visual Studio IDE and using the NuGet Package Manager (PM) Commands.

Using Visual Studio IDE

For installing Selenium WebDriver using the VS IDE, please perform the following steps:

Navigate to Tools -> NuGet Package Manager -> Manager NuGet Packages for Solution and search for ‘Selenium.’

Select Selenium.WebDriver from the search list and click on the Install button.

For automated browser testing, we make use of the Chrome web browser. Hence, we install the Selenium Chrome Driver. Select Selenium.WebDriver.ChromeDriver from the search list and click on the Install button.

Now that the Selenium WebDriver installation is complete, you can use the package in the source code. Including the following statements in the source code to verify whether the Selenium WebDriver is installed or not.

using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

namespace MSTest_Test_Project
{
[TestClass]
public class UnitTest1
{
[TestMethod]
public void TestMethod1()
{
}
}
}

Simplify your work with our Decimal to BCD Converter. Accurately convert decimal numbers to binary-coded decimal values quickly and easily! Try it now and simplify your work!

Using Package Manager (PM) Commands

If you are more comfortable with the command-line terminal, Selenium WebDriver can also be installed by executing the relevant commands on the Package Manager (PM) console.

In order to execute commands from the PM console, navigate to Tools -> NuGet Package Manager -> Package Manager Console.

The following commands have to be executed on the Package Manager (PM) console:

Install-Package Selenium.WebDriver
As the Chrome browser is used for testing, we install the Selenium Chrome Driver as we did in the earlier case.

Install-Package Selenium.Chrome.WebDriver

Shown below is the snapshot of the Package Manager Console:

To verify whether the necessary packages are installed, execute the Get-Package command on the PM console.

PM> Get-Package

Id                                  Versions
--                                  --------                                          
Selenium.WebDriver                  {3.141.0}
Selenium.Chrome.WebDriver           {79.0.0}
...... ......
...... ......

This MSTest Tutorial for beginners and professionals will help you learn how to use MSTest framework with Selenium C# for performing Selenium automation testing.

Need to encode your text into UTF-8 format? Use our UTF-8 Encode tool to encode your text for seamless communication across all platforms and devices. Try it for free today.

Conclusion

With this Selenium MSTest setup example, we had a look at setting up Selenium WebDriver for automated testing with MSTest and C#. The steps mentioned in this Selenium C# tutorial are essential to get started with automation testing with Selenium and C#. With the completion of the Selenium MSTest framework & Selenium installation, you are all set to perform cross browser testing or automated browser testing with MSTest, Selenium, and C# ☺.

Frequently Asked Questions

What is SpecFlow Selenium?

SpecFlow is a BDD tool that helps automate acceptance tests, exploit the full power of .NET, and help improve your development process. It’s an interactive testing framework for .NET and C

Which is better: NUnit or MSTest?

MsTest is similar to NUnit which is another unit testing framework with a focus on simplicity. The difference between the two lies in how they execute tests. In MSTest, tests are executed in parallel whereas in NUnit the test runner will wait for all tests to finish before moving on to the next test. This causes a delay when executing more than one test. Hence, MSTest offers advantages in speed and robustness when compared to NUnit.

22 Practical Tips To Test Automation With Selenium WebDriver

himanshuseth004 — Tue, 26 Dec 2023 08:15:54 +0000

Test automation with Selenium has empowered website testers over the globe to perform automated website testing with ease. Webdriver is a core component of the Selenium framework using which you can perform automated cross browser testing of your website or web application against different types of browsers e.g. Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer, Microsoft Edge, etc.

The primary advantage of performing test automation with Selenium Webdriver over other web automation tools/frameworks is the support for a wide number of programming languages namely Python, Java, C#, Ruby, PHP, JavaScript, .Net, Perl, etc. If you are new to automation testing with Selenium WebDriver, then you can have a look at our Selenium WebDriver tutorial for automated cross browser testing where we talk about the overall architecture of Selenium and how the framework can be used with popular programming languages. You can also check my previous article on Selenium Grid setup Tutorial for cross browser testing, to leverage the ability of parallel testing with Selenium. Irrespective of the programming language being used, there are certain best practices that are applicable for performing test automation with Selenium Webdriver (independent of the development language).

In this article, I will share with you some key tips for Selenium automation testing, that touch upon aspects of code optimization, performance improvements, dynamic web-page loading, handling CSS and HTML code, etc.

Note — Majority of these coding tips for test automation with Selenium WebDriver are generic in nature and can be applied irrespective of the programming language used for the development of test scripts. However, for below demonstration, we have made use of Selenium with Python language.

Perform native app testing on real mobile devices online. Test on Android and iOS test devices online with LambdaTest. Run automated or manual native app tests. Start testing for free today!

Setting The Executable Path Of The Selenium Webdriver

In order to communicate with the browser under test, you need to first download the corresponding plugin/webdriver from their official website. This plugin would be responsible for communicating with the browser and it should be present in your machine (on which you are developing the tests). The plugin/webdriver path has to be set in the Selenium Webdriver configuration.

Though the plugin/webdriver can be placed in any location since you can provide the static/relative path in the Selenium Webdriver configuration, the approach can be error prone and you need to keep track of the file path. A better & more reliable approach is to place the corresponding Selenium Webdriver in the location where the driver executable is present, in which case you need not specify the executable path in the Selenium Webdriver configuration.

If the geckodriver is not present in the Browser location, you need to manually add the path of the same in the source code. We import the selenium.webdriver.firefox.firefox_binary module to provide the path to the Firefox executable.

from selenium import webdriver
from selenium.webdriver.firefox.firefox_binary import FirefoxBinary

ff_binary = FirefoxBinary('path/to/gecko driver')
browser = webdriver.Firefox(firefox_binary=ff_binary)

As seen in the code snippet below, we have not specified the location of the geckodriver (Firefox Webdriver) since it is placed in the same location where Firefox browser is present. This is more reliable approach compared to the previous one and can help in reducing basic errors in implementation of test automation with Selenium.

''' Import the required modules for development '''
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep

'''Creation of Firefox Webdriver '''
driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")

Capture Screenshot Of Test Automation With Selenium WebDriver

While performing tests, you would have come across requirements where a screenshot has to be captured for verifying results of the tests. Selenium WebDriver offers three APIs through which you can take a screenshot of a web-page.

save_screenshot(‘path-where-screenshot-should-be-saved/filename.png’)
get_screenshot_as_file(‘path-where-screenshot-should-be-saved/filename.png’)
get_screenshot_as_png()

The first two APIs lets you save the screen of the current window in a .png file. The API returns False if there is an IOError, else it returns True. These APIs would only work if the file extension is .png, else Python throws an error & the saved content might not be viewable. If you wish to capture a screen of your current window in a binary format then make use of get_screenshot_as_png() API.

''' Import the required modules for development '''
from selenium import webdriver
import StringIO
from PIL import Image

'''Creation of Firefox Webdriver '''
driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")

'''Taking screenshot of the web-page. File would be saved in the location where the source code is present '''

'''Option - 1'''
driver.save_screenshot('screenshot_1.png');


'''Option - 2'''
driver.get_screenshot_as_file('screenshot_2.png');
'''Option - 3'''
screenshot = driver.get_screenshot_as_png();

screenshot_size = (20, 10, 480, 600)
image = Image.open (StringIO.StringIO(screen))
region = image.crop(screenshot_size)
region.save('screenshot_3.jpg', 'JPEG', optimize=True)

Test your native app and website on real iOS and Android devices hosted on the cloud. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test mobile application on real device cloud.

Refreshing WebPage While Automation Testing With Selenium WebDriver

There might be scenarios where there is a requirement for refreshing a web page, especially while waiting for a specific condition. There are a number of ways through which a webpage can be refreshed while performing test automation with Selenium Webdriver, the popular one is listed below.

1. driver.refresh() method

As the name signifies, the refresh() method is used to refresh the web page. It is asynchronous in nature hence; you should make use of this API in conjunction with document.readyState().

''' Import the required modules for development '''
from selenium import webdriver

'''Creation of Firefox Webdriver '''
driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")
driver.refresh()

2. ActionChains() method

ActionChains() are another way to automate low-level interactions for automation testing with Selenium, such as key press, mouse button actions, etc. In order to refresh the webpage, we make use of the ‘CTRL + F5’ combination.

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.keys import Keys

'''Creation of Firefox Webdriver '''
# driver = webdriver.Chrome()
driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")

time.sleep(5)

print("Before refresh")

ActionChains(driver) \
    .key_down(Keys.CONTROL) \
    .send_keys(Keys.F5) \
    .key_up(Keys.CONTROL) \
    .perform()

print("After refresh")

sleep(5)
driver.quit()

Open A Webpage In A New Tab With Selenium Webdriver

execute_script can be used to synchronously execute JavaScript code in current window/frame. Argument (a JavaScript) to open the webpage is passed as the argument to execute_script

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep

driver = webdriver.Firefox()
driver.get("http://www.google.com/")

driver.implicitly_wait(10)

#open tab
driver.execute_script("window.open('https://www.lambdatest.com', 'new tab')")

sleep(5)
driver.quit()

Saving Partial Screenshot Of A Web page With Selenium Webdriver

There are cases where you might need to take a partial screenshot of a webpage as your perform test automation with Selenium. In such cases, you can make use of the Pillow module. You need to first install the Pillow/PIL module using the command

pip install pillow

Screenshot of the entire webpage is taken using the get_screenshot_as_png() API. Once the screenshot is ready, the PIL library is used to open the captured image in memory, after which the image (which contains the entire webpage screenshot) is cropped to get the resultant image.

from selenium import webdriver
''' Install the Pillow module using the command pip install pillow '''
from PIL import Image
from io import BytesIO

driver = webdriver.Firefox()
driver.get('http://google.com/')

# Use the Inspection tool to find the location of the logo
element = driver.find_element_by_id('hplogo')
image_location = element.location
size = element.size

png = driver.get_screenshot_as_png()

''' Since the webpage screenshot is ready, we can exit the browser.'''
driver.quit()

''' PIL Library is used to open the image in memory '''
crop_image = Image.open(BytesIO(png))

''' Extract the Left, Right, Top, and Bottom co-ordinates ''' 

left = image_location['x']
top = image_location['y']
right = image_location['x'] + size['width']
bottom = image_location['y'] + size['height']

crop_image = crop_image.crop((left, top, right, bottom))
crop_image.save('logo-screenshot.png')

Evaluate your native app and website by testing them on actual iOS and Android devices available on the cloud android device. LambdaTest provides a convenient, cost-effective, and centralized solution for conducting real-time and automated tests on a cloud-based platform with real devices.

Execute JavaScript Code In Selenium Webdriver

execute_script is used to execute JavaScript code as you perform test automation with Selenium WebDriver. The syntax is driver.execute_script(“javascript code here”).

As shown in the example below, a on_click action of Register is performed [Class name is home-cta].

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com")

driver.execute_script("document.getElementsByClassName('home-cta')[0].click()")

sleep(10)

driver.close()

Extracting Results Of JavaScript Code With Selenium Webdriver

After invoking the JavaScript code for automation testing with Selenium, you need to extract the results of these JavaScript codes. You can make use of the return keyword in order to get the result of a JavaScript code as shown in the extended example where we explained JavaScript.

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com")

driver.execute_script("document.getElementsByClassName('home-cta')[0].click()")

result = driver.execute_script("return 0")
print(result)

sleep(10)

driver.close()

Handling Multiple Browser Types For Automated Cross Browser Testing Using Selenium

There are multiple scenarios that you might need to test your code against different browsers e.g. Firefox, Chrome, Internet Explorer. The practice of testing a website across different browsers is termed as automated browser testing. To perform automated browser testing with Selenium automation testing, you should incorporate selective handling of those browsers in your unittest code or pytest code. A code snippet (which makes use of pytest) to handle multiple browsers is shown below:

# Import the 'modules' that are required for execution

import pytest
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from time import sleep

#Fixture for Firefox
@pytest.fixture(params=["chrome", "firefox"],scope="class")
def driver_init(request):
    if request.param == "chrome":
        # Perform necessary actions here
    if request.param == "firefox":
    # Perform necessary actions here
    yield
    web_driver.close()
    ...........
    ...........

Check your app and website by trying them out on real iOS and Android devices in the cloud device testing. LambdaTest offers an easy, budget-friendly, and centralized way to run both real-time and automated tests on a cloud-based platform using real devices.

Locating Elements On A Web Page Using CSS Locators

As you perform test automation with Selenium, locating web elements on a page comes as a foundation to your automation scripts. In case you want to perform conditional execution based on the presence of a particular kind of web element like Tag, Class, ID, etc. you can make use of find_elements_*** API. Some of them are mentioned below

find_elements_by_class_name — Find elements by Class Name
find_elements — Find elements by strategy and locator
find_element_by_link_text — Find element by link text
find_element_by_partial_link_text — Find element by partial match of link text

Shown below is the usage of find_element_by_partial_link_text & find_elements_by_class_name where the elements are searched on https://www.lambdatest.com/ which is the URL under test.

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from time import sleep
from selenium.common.exceptions import NoSuchElementException

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com")

try:
    element = driver.find_element_by_partial_link_text("START TESTING")
    print("Partial text Element found")
    element = driver.find_elements_by_class_name('home-btn-2')
    print("Button Element found")
except NoSuchElementException:
    print("No element found")

sleep(10)
driver.close()

HTML Source Of WebElement In Selenium Webdriver

innerHTML property can be used to capture the source code of a WebPage. innerHTML is also used to examine any changes in the page since the page was first loaded by the web browser. You can write the entire source code in a .html file for future reference.

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from time import sleep
import io

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com")

elem = driver.find_element_by_xpath("//*")
source_code = elem.get_attribute("innerHTML")

filename = open('lambdatest_page_source.html', 'w')
filename.write(source_code)
filename.close()

sleep(10)

driver.close()

Perform Mouse Over Actions In Selenium Webdriver

There would be scenarios where you might need to perform a click on an item which is a part of the menu or an item which is a part of a multi-level menu. First, we locate the Menu item and then perform a click operation on the intended menu item.

In the example below, the URL under test is https://www.lambdatest.com/. The intent is to navigate to the Selenium on the home page. The first task is to locate the Menu which matches the ID bs-example-navbar-collapse-1. By using the Inspect Tool, we get the correct element-id, details is as shown in the snapshot

We move to the Menu using the move_to_element operation which is a part of the action_chains module. Next task is to locate the Menu item which contains the text ‘Automation’ for which we make use of find_element_by_xpath(“//a[contains(text(),’Automation’)]”) after which Click operation is performed.

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com")

action = ActionChains(driver);

# Head on the top-level menu on Lambdatest website
parent_level_menu = driver.find_element_by_id("bs-example-navbar-collapse-1")
action.move_to_element(parent_level_menu).perform()

# Perform a click operation on the Menu item which contains text Automation
child_level_menu = driver.find_element_by_xpath("//a[contains(text(),'Automation')]")
child_level_menu.click();

sleep(10)

driver.close()

Tired of unorganized YAML code? Our YAML Beautifier tool makes YAML code easy to read and understand. Simply paste your code and produce well-formatted document in seconds!

Closing Tabs Without Closing The Browser In Selenium Webdriver

One of the most basic yet mandatory tips for any test automation Selenium script is to realize how to close tabs without closing the entire browser. driver.close() closes the focused tab and driver.quit() will close all the tabs (of the browser) along with quitting of the driver. In case you need to keep the browser window open (and quitting all other tabs), you can make use of switch_to.window method which has the input parameter as window handle-id.

Note — There are other methods to approach this problem. window.open method can be used with appropriate options (i.e. opening new window, opening new tab, etc.). Sending the right key combinations using send_keys can be used, but the behavior has a dependency on the version of geckodriver (for Firefox), version of chromedriver, etc. Hence, send_keys approach is not preferable since the output can vary based on WebDriver versions.

In the below example, we open one new window which contains the test URL and close other windows. We only make use of window_handles to achieve the requirement.

from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.get('https://www.google.com')
# Open a new window
driver.execute_script("window.open('');")
time.sleep(5)
# Switch to the new window since the focus would still be on the old window
driver.switch_to.window(driver.window_handles[1])
driver.get("https://lambdatest.com")
time.sleep(5)
# close the active tab
driver.close()
time.sleep(5)
# Switch back to the first tab
driver.switch_to.window(driver.window_handles[0])
driver.get("https://www.yahoo.com")
time.sleep(5)
# Close the only tab, will also close the browser.
#driver.close()

Handling Drop-Down Menu In A Page With Selenium Webdriver

There is a requirement where you have to select a particular option from a drop-down menu present in a web-page. There are a number of ways in which you can select the desired option from the drop-down menu.

select_by_index(desired_index_value)
select_by_visible_text(“text_to_be_selected_from_drop_down_menu”)
select_by_value(value)

We will use http://demos.dojotoolkit.org/dijit/tests/test_Menu.html for Selenium automation testing on this requirement. Before we select the required element from the drop-down menu, it is important to get the ID of the element under test. We use find_element_by_xpath method to locate the element and once we have located the element (using the ID), we select the value from the drop-down menu.

In the example below, we have shown the different methods through which you can select an element from the menu (@aria-label=’select’)

from selenium import webdriver
from selenium.webdriver.support.ui import Select
from time import sleep
from selenium.common.exceptions import NoSuchElementException
from pip._vendor.distlib import resources

driver = webdriver.Firefox()
driver.get("http://demos.dojotoolkit.org/dijit/tests/test_Menu.html")

''' Let the page load completely '''
sleep(5)

try:
    ''' You can derive these details by using Web Inspector '''
    select_element = Select(driver.find_element_by_xpath("//select[@aria-label='select']"))
    # Option 1 - Selecting the drop-down item by using the text
    select_element.select_by_visible_text("bleed through")
    sleep(5)
    # Option 2 - Selecting the drop-down item by using the index value
    select_element.select_by_index(0)
    sleep(5)
    # Option 3 - Selection of desired option using value
    ''' This option would fail since there is no value in the page
     which we are testing right now ''' 
    # select_element.select_by_value('2')
except NoSuchElementException:
    print("Element not found")

''' Addition of delay so that we can have a look at the output '''
sleep(5)

''' Release the resources '''
driver.quit()

Struggling with messy Lua scripts? Our Lua Beautifier tool provides clean and structured formatting. Beautify your code and Improve readability today!

Handling Operations With Check Boxes With Selenium Webdriver

Check boxes are common elements in web pages that are used in scenarios where you have to select only one option from a number of options. Like drop-down menu handling, we locate the required checkbox using find_element_by_xpath method and once we find the checkbox, a click operation is performed.

We will use http://demos.dojotoolkit.org/dijit/tests/form/test_CheckBox.html for Selenium automation testing and the requirement is to ‘check’ the checkbox which has the value cb7: normal checkbox. The matching is done using driver.find_elements_by_xpath(“//*[contains(text(), ‘text to be searched’)]”).

from selenium import webdriver
from selenium.webdriver.support.ui import Select
from time import sleep
from selenium.common.exceptions import NoSuchElementException
from pip._vendor.distlib import resources

driver = webdriver.Firefox()
driver.get("http://demos.dojotoolkit.org/dijit/tests/form/test_CheckBox.html")

''' Let the page load completely '''
sleep(20)

try:
    ''' You can derive these details by using Web Inspector '''
    driver.find_element_by_xpath("//*[contains(text(), 'cb7: normal checkbox')]").click()
except NoSuchElementException:
    print("Element not found")

''' Addition of delay so that we can have a look at the output '''
sleep(5)

''' Release the resources '''
driver.quit()

Selecting Element via CSS Selector In Selenium Webdriver

There is a provision to locate elements on a webpage using the CSS locator as you perform test automation with Selenium. find_elements_by_css_selector can be used for locating elements where details of element (label, link, ID, etc.) to be located have to passed as the input argument. It finds a list of elements within this element’s children by CSS Selector.

The intent is to locate the Login button on https://lambdatest.com/ using find_elements_by_css_selector and perform click operation. The code associated with Login is below. Code inspection tool snapshot also gives the required information.

<html>
........
<li class="login">
<a href="https://accounts.lambdatest.com/register">Free Sign Up</a>
</li>
.....
</html>

Hence, we pass li.login as an argument to find_element_by_css_selector and once it locates the element, Click operation is performed.

from selenium import webdriver
from selenium.webdriver.support.ui import Select
from time import sleep
from selenium.common.exceptions import NoSuchElementException
from pip._vendor.distlib import resources

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")

''' Let the page load completely '''
sleep(20)

try:
    ''' You can derive these details by using Web Inspector '''
    driver.find_element_by_css_selector("li.login").click()
except NoSuchElementException:
    print("Element not found")

''' Addition of delay so that we can have a look at the output '''
sleep(5)

''' Release the resources '''
driver.quit()

Struggling with messy PHP Beautifier & Formatter Online scripts? Our PHP Formatter & Beautifier Online tool provides clean and structured formatting. Beautify your code and Improve readability today!

Explicit Wait For Handling Different Scenarios In Selenium Webdriver

It is very normal to observe a scenario in Selenium automation testing where a webpage may take time to load or you want a particular web element on the page to be visible before triggering your test code. In such cases, you need to perform Explicit Wait which is a piece of code through which define a condition to occur before you proceed further in the code.

Selenium has WebDriverWait which can be applied on any web element with a condition & time duration. It can throw an exception in case the element on which the wait is performed is not present or a timeout occurs.

In the example below, we wait for link_text ‘Sitemap’ to load on the page and the timeout is specified in the WebDriverWait method. If the element is not loaded within the timeout duration, we throw an exception.

from selenium import webdriver
from selenium.common.exceptions import TimeoutException
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.common.by import By
from pip._vendor.distlib import resources
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")
timeout = 10

try:
    ''' We wait till the time link with text SITEMAP is loaded '''
    ''' If that link text is not present on the page, it gives a time out '''
    ''' Try replacing Sitemap with Sitemap123 and you can encounter a timeout '''
    element_present = EC.presence_of_element_located((By.LINK_TEXT, 'Sitemap'))
    WebDriverWait(driver, timeout).until(element_present)
except TimeoutException:
    print("Timed out while waiting for page to load")
driver.quit()

Scroll Operations In A Web Page With Selenium Webdriver

You may have a requirement where you need to perform scroll-up/scroll-down operation on a page while performing test automation with Selenium. You can achieve the same using execute_script with window.scrollTo JS code as the argument. In the example below, we scroll to the end of the page after the website under test is loaded.

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")
timeout = 10

''' Scroll to the end of the page '''
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

''' Sleep is added so that you can have a look at the output '''
sleep(10)

''' Scroll again to the top of the page '''
driver.execute_script("window.scroll(0, 0);")

sleep(10)
driver.quit()

Struggling with messy Python Beautifier & Formatter Online scripts? Our Python Formatter & Beautifier Online tool provides clean and structured formatting. Beautify your code and Improve readability today!

Zoom In & Zoom out using Selenium

In order to zoom in or zoom out while Selenium automation testing, you should use the transform CSS property (for the corresponding browser) that lets you perform zoom in, zoom out, rotate, skew, etc. operations on the page.

The CSS parameters for different types of browsers are below

In the example below, we zoom-out the web page that is loaded in the browser by 200% and later zoom in by 100% (i.e. back to normal). Since we are using the Firefox browser, we have made use of MozTransform CSS property.

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.lambdatest.com/")
timeout = 10

''' Zoom in by 200% '''
driver.execute_script('document.body.style.MozTransform = "scale(2.0)";')
driver.execute_script('document.body.style.MozTransformOrigin = "0 0";')

sleep(10)

''' Zoom out by 100% '''

driver.execute_script('document.body.style.MozTransform = "scale(1.0)";')
driver.execute_script('document.body.style.MozTransformOrigin = "0 0";')

''' Sleep is added so that you can have a look at the output '''
sleep(10)

''' Release all the resources '''
driver.quit()

Find Size Of An Element In A Web Page With Selenium

You have to first search for the element by ID and then use the .size property to calculate the size of the searched element. In the example below, we calculate the size of the button create_programmatic_menu (ID = createDestoryButton) in the page http://demos.dojotoolkit.org/dijit/tests/test_Menu.html

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("http://demos.dojotoolkit.org/dijit/tests/test_Menu.html")
timeout = 10

search_element = driver.find_element_by_id("createDestroyButton")

print(search_element.size)

''' Release all the resources '''
driver.quit()

When you execute the above code, it would output the size of the button (ID — CreateDestroyButton).

Get X & Y coordinates Of An Element In A Web Page In Selenium Webdriver

You have to follow a similar approach which you used for calculating the size of an element. You have to first search for the element by ID and then use the .location property to calculate the X & Y coordinates of the searched element.

The test URL is http://demos.dojotoolkit.org/dijit/tests/test_Menu.html and we calculate the X & Y co-ordinates of the button create_programmatic_menu (ID = createDestoryButton)

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("http://demos.dojotoolkit.org/dijit/tests/test_Menu.html")
timeout = 10

search_element = driver.find_element_by_id("createDestroyButton")

print(search_element.location)

''' Release all the resources '''
driver.quit()

When you execute the above code, it would output the X, Y coordinates e of the button (ID — CreateDestroyButton).

Disable JavaScript Using Custom Profile Using Selenium Webdriver

In case you want to disable JavaScript support of the browser to validate automated cross browser compatibility with Selenium automation testing, you need to change the profile settings of the browser under test (in our case, it is Firefox) and apply the changes to the profile. We make use of DEFAULT_PREFERENCES[‘frozen’][‘javascript.enabled’] = False to disable the JavaScript support for the browser.

Once the code is executed, you should verify the profile changes by typing about:config in the address bar and searching for the value of javascript.enabled property.

from selenium import webdriver

''' Since we have the geckodriver & Firefox browser in same location '''
''' We do not pass the location of the Firefox profile '''
ff_profile = webdriver.FirefoxProfile()

ff_profile.DEFAULT_PREFERENCES['frozen']['javascript.enabled'] = False
ff_profile.set_preference("app.update.auto", False)
ff_profile.set_preference("app.update.enabled", False)

''' Update the preferences '''
ff_profile.update_preferences()

''' Load the Firefox browser with the updated profile '''
driver = webdriver.Firefox(ff_profile)

''' Verify whether the changes are working fine or not '''
driver.get("about:config")

Below is the screenshot of about:config settings (after the code execution) in Firefox

Setting Manual Proxy Settings With Selenium

In some scenarios, you may want to change the Proxy Settings in order to execute your tests. For changing the proxy settings, you need to first import the module selenium.webdriver.common.proxy. You have to set the proxy type to MANUAL, after which you change the proxy settings and apply to the new settings to the browser under test (in our case it is Firefox).

You need to replace ip_address & port_number with the IP address & port number that you plan to use for your testing.

from selenium import webdriver
from selenium.webdriver.common.proxy import Proxy, ProxyType

proxy_settings = Proxy()

''' The proxy settings are first changed to Manual '''
proxy_settings.proxy_type = ProxyType.MANUAL

''' Replace ip_address with Proxy IP address and '''
''' port_number with the port number which you plan to use '''
proxy_settings.http_proxy = "ip_address:port_number"
proxy_settings.socks_proxy = "ip_address:port_number"
proxy_settings.ssl_proxy = "ip_address:port_number"

''' You can add capabilties for different browsers & devices '''
capabilities = webdriver.DesiredCapabilities.FIREFOX
proxy_settings.add_to_capabilities(capabilities)

driver = webdriver.Firefox(desired_capabilities=capabilities)

JSON to XML Converter is a simple and fast tool that converts JSON to XML data. Use this tool to convert your JSON documents into valid XML for easy data exchange.

Conclusion

We have covered the majority of the Selenium tips to help you perform test automation with Selenium like a professional. Though you can verify your website/web-app on different browsers, devices, and operating systems using your local machine, the extent of testing will be limited since you cannot cover the complete spectrum of devices + operating systems + browsers (& browser versions). This is where you should make use of these tips & tricks to perform automated cross browser testing for your website/web application.

Rather than building a local infrastructure to execute the task of automated cross browser testing, you can make use of a scalable Selenium Grid on-cloud offered by LambdaTest. Get started for free.

You have to make minimal changes in order to move your local Selenium automation test code to LambdaTest Selenium as you begin to expand your test coverage by testing your web-app on more than 2000 real browsers + OS + devices combinations. You also get integrations to numerous CI CD tools, project management tools and more. Check out all of the LambdaTest integrations.

Test automation with Selenium can be a tough task but with the actionable insights, rather practical tips for Selenium automation testing that I listed above in this article. You can be proficient with test automation in Selenium. Let me know if there are any other tips for test automation with Selenium that have helped you fast track your test cycles. Cheers & happy testing! 🙂

Web Scraping with Python Tutorial - A Complete Guide with Examples

himanshuseth004 — Wed, 22 Nov 2023 07:41:14 +0000

We live in an era where we are surrounded by data that can be harnessed by extracting meaningful insights from it. As quoted by Tim Berners-Lee, inventor of the World Wide Web — “Data is a precious thing and will last longer than the systems themselves.”

If the data is the new oil, web scraping (or web harvesting) is the expeller that helps squeeze more oil.🙂Web scraping can be leveraged for analyzing and deriving actionable insights from tons of information available on the internet.

Irrespective of the business domain (e.g., eCommerce, EdTech, Fintech, etc.), scraping can be used for market research, pricing intelligence, lead generation, and sentiment analysis, to name a few! Though web scraping is immensely useful, it comes with a caveat — Scraping should be done legally and ethically, respecting the website’s T&C and data privacy regulations.

Popular programming languages like Python, Java, JavaScript, etc., are well-equipped with tools and libraries that can ease the job of web scraping. In this blog, I will limit the discussion of web scraping with Python — a popular programming language for automated testing. You can check my earlier blog on Python automation testing, highlighting why Python is the best-suited language for automation testing.

By the end of this blog on web scraping with Python, you will learn to scrap static and dynamic websites using the best Python tools (or libraries) like PyUnit, pytest, and Beautiful Soup. The actionable examples will help you harness the capabilities of web scraping with Python to extract meaningful insights from websites.

Without further ado, let’s get started…

**Note: **Scrap & Scrape and document & page are used interchangeably throughout the blog.

Text Uppercase is a free online tool for converting text into uppercase. Enter your text and click the convert button to make all lowercase letters upper case.

What is Web Scraping?

To set the ball rolling, let’s do a quick recap of the What & Why of web scraping. In simple terms, web scraping, or web harvesting (or data extraction), is the technique for deriving information (that matters) from websites.

Shown below is the simplistic representation of web scraping that shows that input is a website that needs to be scrapped by the scraping logic.

Web Scraping Architecture

Once the information from the HTML of the page is scraped, the raw data can be stored in a more presentable (or readable) format in Excel sheets, databases, etc.

With scraping options in the arsenal, it becomes imperative to opt for efficient and responsible scraping! In the examples presented later in this blog on web scraping with Python, the scraped information will be presented on the terminal.

Prominent Use Cases of Web Scraping

Most new-age websites leverage JavaScript for loading and updating content on the page. AJAX (Asynchronous JavaScript and XML) is used to retrieve data from the server and update relevant parts of the page (without a full page reload).

For instance, videos on the LambdaTest YouTube channel are dynamically loaded when the user performs a scroll operation. As seen in the below screenshots, the URL remains unchanged, but the videos are loaded on a dynamic basis.

Example — Dynamic Website Content

Popular Python frameworks like pytest and PyUnit, in conjunction with Selenium, can be used for dynamic web scraping websites (and SPAs) like YouTube, Netflix, LambdaTest eCommerce Playground, and more.

It goes without saying that scraping can be done on static websites where the entire HTML page content is downloaded and parsed to extract the desired information. You can check out my earlier blog highlighting the difference between Static and Dynamic Web Scraping.

Now that we know that it is possible to scrap static and dynamic websites, let’s look at some of the primary use cases of web scraping:

Competitor Analysis

Irrespective of the size (or scale) of the business, businesses must keep a close watch on their competition. Insights into competitor’s products and services can be instrumental in having an upper edge over the competition.

Web scraping can effectively scrape relevant information (e.g., products, services, pricing, etc.) from competitors’ websites. The scraped data can be leveraged for tweaking product & pricing-specific information on the website.

Lead Generation

Web scraping can gather details (e.g., names, phone numbers, email addresses, etc.) from websites to generate leads for your business.

The scraped data is then fed to CRM software, so the sales team can reach out to those leads.

Rotate your text and add some creativity to your words with our Text Rotater tool. Try it out now and see the results in just a few clicks!

Data Analysis

Many websites have products that span across different categories. For instance, a horizontal eCommerce website might have products across electronics, apparel, baby care, etc.

Web scraper is instrumental in extracting product metadata, seller details, number of SKUs, etc., from such websites. Whether it is a SPA (Single Page Application) or paginated content, relevant web scraping tools & libraries let you scrape information from them.

Apart from the use cases mentioned above, you can also use web scraping for academic research and training data for ML projects!

Python Libraries and Tools for Web Scraping

I have also tried web scraping using C#, but the web scraping ecosystem is nothing like Python. One of the major benefits of using Python is the availability of many tools and libraries for web scraping.

It is recommended to perform the package installation in a virtual environment (venv) to isolate it from the packages in the base environment. Run the commands virtualenv venv and source venv/bin/activate on the terminal to create the virtual environment.

Though I will be covering a few libraries (or tools) using a detailed demonstration, let’s list some of the popular ones below:

Selenium

For starters, Selenium is a popular open-source framework that helps with web browser automation. The tools and libraries offered by Selenium are instrumental in automating interactions with the elements in the document (or page). When writing this blog on web scraping with Python, the latest version was 4.14.0.

Selenium 3, the earlier version of Selenium, used the JSON-Wire protocol. On the other hand, Selenium 4 uses the W3C protocol because automated tests are less flaky (or more stable) when compared to tests implemented using Selenium 3. For a quick recap, you can check out our blog highlighting the differences between Selenium 3 and Selenium 4.

Most modern-day web pages use AJAX & JavaScript to load and display dynamic content. Consider LambdaTest eCommerce playground. The content is loaded when the user scrolls the page. As seen in the screenshot below, the images are lazy loaded and appear in the DOM once the user scrolls the page.

Example of Lazy Loading of Images

This is where Selenium proves to be an instrumental option for web scraping due to its ability to handle dynamically loaded content using JavaScript.

In the case of Python, popular test automation frameworks like pytest and PyUnit can be leveraged for scraping static and dynamic page content. Run the command pip install selenium *(or *pip3 install selenium) depending on the Python version installed in the machine.

PyUnit (or unittest ) is the default test automation framework, part of the Python standard library.

PyUnit is inspired by the xUnit framework in C# and is also compatible with older versions of Python. For pytest, check out our zero-to-hero Selenium pytest tutorial for a quick recap on running pytest with Selenium.

Run the command pip install pytest (or pip3 install pytest) to install the pytest framework on the machine.

Explicit waits in Selenium will be leveraged for complex scenarios like waiting for the content to load, navigating through multiple pages, and more. In further sections of this blog on web scraping with Python, I will be using appropriate locators in Selenium along with find_element() / find_elements() methods to scrape content on the document (or web page).

Need to know how many characters are in your text? Get an accurate count of the characters in your text with our free online character count tool. Try it now and see how easy it is!

Beautiful Soup

Beautiful Soup is a popular Python library primarily built for web scraping. As specified in the official documentation, Beautiful Soup can navigate and parse through HTML & XML documents. Unlike Selenium, which can be used for static and dynamic web scraping, Beautiful Soup is apt for static web scraping with Python.

It supports unit test discovery using pytest. When writing this blog on web scraping with Python, the latest version of Beautiful Soup is 4.12.1. Hence, the library is also referred to as BS4. In case you are using BS3, simply changing the package name from BeautifulSoup to bs4 will help in porting the code to BS4. For more details, you can refer to the official BS4 porting guide.

BS4 uses the html.parser module by default, which can be swapped out with lxml or html5lib libraries in Python. Web elements on the HTML page can be located using the CSS Selector and XPath locators. Akin to the *find_element() *method in Selenium Python, the find() method in BS4 returns the element located using the appropriate selector.

Similarly, the find_all() method in BS4 (like the find_elements() method in Selenium) scans through the entire page and returns a list of all the descendants that match the filters. You can refer to the official documentation of Beautiful Soup (or BS4) to get insights into all the methods provided by the library.

Before using BS4 for static web scraping, the built-in Requests library makes HTTP requests. Text (or text) that contains the HTML content from the HTTP response object is then subjected to HTML parsing (or html.parser) using BS4. Once parsed, the Beautiful Soup object can be used for navigating & searching through the document’s structure.

BS4 can also be used with Selenium to give wings to dynamic web scraping. In this case, BS4 is used to parse and extract data from the loaded (or rendered) HTML page, whereas Selenium is used to navigate to the relevant pages.

Run the command pip3 install beautifulsoup4 or pip3 install bs4 on the terminal to install Beautiful Soup 4 (or BS4). As seen below, the Beautiful Soup 4.12.2 installation was successful.

In further sections of the blog, I will demonstrate the usage of Beautiful Soup and Selenium for scraping content on various pages (1 through 5) on the LambdaTest eCommerce playground.

Playwright

Playwright is another popular test automation framework suited for web scraping. It is primarily used for end-to–end testing of modern web applications. Like Selenium, it also provides APIs that let you perform advanced interactions on the page using headless versions of Chrome, Chromium-based browsers, and WebKit.

Run the command pip3 install playwright (or pip install playwright) to install Playwright for Python on the machine.

When writing this blog on web scraping with Python, the latest version of Playwright is 1.39.0. Auto-waiting in Playwright ensures that waits on elements are performed before they become actionable. This eliminates the need to add artificial timeouts, making the scraping code much more maintainable & readable.

Over and above, Playwright plugins like Pyppeteer (Python port of Puppeteer) and scrapy-playwright can also be leveraged for static and dynamic web scraping with Python.

Scrapy

Scrapy is a full-fledged web crawling and scraping framework that can be used to crawl websites to extract structured data from the page(s). Scrapy can be leveraged for data mining, monitoring, and automated testing.

When writing this blog, the latest version of Scrapy is 2.11.0. Run the command pip3 install scrapy (or pip install scrapy) on the terminal to install Scrapy.

As stated in the Scrapy documentation, Scrapy can extract data using APIs like Amazon Web Services (AWS). Though Scrapy is mainly used for static web scraping, it can also be used for scraping dynamic web pages (e.g. QuotestoScrape JS).

Similar to Beautiful Soup, Scrapy along with frameworks like Selenium or Playwright, can be instrumental in scraping dynamic web content.

In such cases, the scrapy-playwright plugin is handy for scraping dynamic web content using Playwright and Scrapy.

PyQuery, lxml, and Mechanical Soup are other popular libraries for scraping with Python.

In the further sections of the blog on web scraping with Python, the discussion & demonstration will be limited to the following libraries (or tools):

Web scraping using Selenium PyUnit
Web scraping using Selenium pytest
Web scraping using Beautiful Soup

The learnings from the demonstration will be useful for creating sample code for scraping with other Python-based tools. So, let’s get our hands dirty with some code. 🧑‍💻

Sentence Count is a free, easy-to-use tool for counting sentences in text. Simply upload your text, click Count and you’ll get the number of sentences in seconds!

Demonstration: Web Scraping With Python

For demonstrating web scraping using Selenium PyUnit (& pytest) and Beautiful Soup, I will be using the following websites:

Directory Structure

As seen in the project structure, scraping using PyUnit, pytest, and Beautiful Soup is driven via a Makefile. Let’s look at the important directories and files in more detail below:

Here is a closer look at the overall structure:

pageobject

Page Object Model (POM) design pattern is used for separate web locators from the core test logic. locators.py contains details of locators used for interacting with the test websites mentioned earlier.

helpers.py contains the implementation of the wrapper functions for triggering actions, performing explicit waits, and more. Since the use cases for scraping with PyUnit and pytest are the same, two wrapper functions are created for reduced code duplication and improved maintenance:

Both the functions return a list where the scraped information is stored for further operations.

tests

As the name suggests, the tests folder contains the implementation of the core test methods that are responsible for scraping the content using the respective scraping library (or tool).

To keep the code more modular and maintainable, we have created subfolders (or sub-directories) for the libraries used for scraping the test websites:

We will cover more about the implementation in the code walkthrough section of the blog.

Configuration (or setup) files

The conftest.py file in pytest helps to fixture and share fixtures, hooks, and other configuration options used in the test code. For demonstration, scraping with Selenium and/or Beautiful Soup is performed using browsers on the local machine and cloud grid like LambdaTest.
LambdaTest is an AI-powered test orchestration and execution platform that lets you perform automated testing using Selenium Python on an online browser farm of 3000+ real browsers and operating systems.

Catch up on the latest tutorials around Selenium automation testing, Appium automation, and more. Subscribe to the LambdaTest YouTube Channel.

Want to decode a messy URL? Unleash the full potential of your website with our online URL Parse tool. Optimize your website’s URLs to improve your site’s visibility.

The scope of the pytest fixture (i.e., @pytest.fixture) is set to function, which means that the fixture is set up and torn down before & after executing a test function (or method). As seen below, execution is controlled using the environment variable EXEC_PLATFORM, which can be set to local *or *cloud.

Username (LT_USERNAME) and Access Key (LT_ACCESS_KEY) for using the cloud Selenium Grid on LambdaTest can be obtained by navigating to LambdaTest Profile Page. Set them using the export (for macOS and Linux) or set (for Windows) command to export the environment variables.

In the teardown function, the quit() method is invoked to terminate the browser session. The JavaScriptExecutor in Selenium [i.e., execute_script()] is used to update the lambda-status variable, which indicates the test execution status on LambdaTest Selenium Grid.

Similarly, we have created puynitsetup.py that contains configurations related to the PyUnit (or unittest ) framework. Implementation under the init() method is used for initializing the test cases.

Irrespective of whether the tests are executed on a local grid or cloud Selenium grid, the browser is initialized in headless mode. If the environment variable EXEC_PLATFORM is set to the cloud, Chrome browser on the LambdaTest grid is instantiated in headless mode.

The said capability (i.e., headless), along with the other capabilities, can be set using the LambdaTest Capabilities Generator.

As stated in the official Selenium documentation, Chrome is instantiated in the headless mode by adding –headless=new to Chrome options.

Lastly, the setUp() and tearDown() methods are implemented to set up and tear down the test environment. In fact, init() is optional, and implementation under it can be moved under the setUp() method.

Makefile

As stated earlier, scraping using the respective libraries (or tools) is controlled via a Makefile. Typing make help provide all the options available for execution.

The make install command will install the packages/libraries specified in requirements.txt.

pytest-selenium
selenium>=4.6.0
urllib3==1.26.12
requests
py
bs4

Pre Requisites

First and foremost, trigger virtualenv venv and source venv/bin/activate on the terminal to create the virtual environment.

Since there is a provision to perform scraping on the cloud Selenium grid, it is recommended to have an account on LambdaTest. To scrap websites using Selenium on LambdaTest Grid, you must update LT_USERNAME and LT_ACCESS_KEY (in Makefile) from the LambdaTest Profile Page.

Install the required frameworks and libraries (mentioned in requirements.txt) by triggering the make install command on the terminal.

With this, the stage is finally set to scrap the test websites. Let’s dive in!

Since the scraping logic with Selenium & Python remains the same for PyUnit and pytest, we have combined both frameworks in this section. To begin with, we look into the configuration aspects of the framework, after which we would look into the common scraping logic.

Need to extract text from HTML code? Our free online tool makes it easy and fast. Save time by extracting only the text you need from HTML code in no time.

Web Scraping using Selenium and PyUnit

For simplification, all setup-related code (i.e., instantiating the browser, setting explicit timeouts, etc.) is in pyunitsetup.py. Essential aspects of the setup are already discussed in the earlier section of this blog on web scraping with Python.

Let’s deep dive into some of the integral parts of the configuration file pyunitsetup.py

import sys
import os
from os import environ
sys.path.append(sys.path[0] + "/../..")
from pageobject.locators import locators
from pageobject.locators import *

exec_platform = os.getenv('EXEC_PLATFORM')

class pyunit_setup:    
    def __init__(self):
        if exec_platform == 'cloud':
            username = environ.get('LT_USERNAME', None)
            access_key = environ.get('LT_ACCESS_KEY', None)

            ch_options = webdriver.ChromeOptions()

            lt_options = {}
            lt_options["build"] = "Build: Web Scraping with Selenium & Pyunit"
            lt_options["project"] = "Project: Web Scraping with Selenium & Pyunit"
            lt_options["name"] = "Test: Web Scraping with Selenium & Pyunit"

            lt_options["browserName"] = "Chrome"
            lt_options["browserVersion"] = "latest"
            lt_options["platformName"] = "Windows 11"

            lt_options["console"] = "error"
            lt_options["w3c"] = True
            lt_options["headless"] = True

            ch_options.set_capability('LT:Options', lt_options)

            gridURL = "@hub.lambdatest.com/wd/hub">https://{}:{}@hub.lambdatest.com/wd/hub".format(username, access_key)
            self.browser = webdriver.Remote(
                command_executor = gridURL,
                options = ch_options
            )
        elif exec_platform == 'local':
            ch_options = ChromeOptions()
            ch_options.add_argument("--headless=new")
            self.browser = webdriver.Chrome(options=ch_options)

    def setUp(self):
        self.browser.implicitly_wait(10)
        self.browser.maximize_window()

    def tearDown(self):
        if (self.browser != None):
            self.browser.quit()

The value of the EXEC_PLATFORM environment variable (i.e., cloud or local) decides whether the instantiation of the browser is on the local machine or cloud grid on LambdaTest.

Remote WebDriver with grid URL & browser options as parameters are instantiated using the *webdriver.Remote() *method. Capabilities (or browser options) can be obtained from LambdaTest Capabilities Generator.

Chrome in headless mode is instantiated as we do not require GUI for web scraping with Python. The w3c flag is set to true since we are using Selenium 4 (which is W3C compliant) for the tests.

When using a local grid (or machine), we set the –headless=new argument for Chrome Options.

Finally, the *setUp() *and *tearDown() *methods contain the implementation of maximizing the browser and releasing the resources post text execution respectively.

Perform browser test automation on the most powerful cloud infrastructure. Leverage LambdaTest automation testing for faster, reliable and scalable experience on cloud.

Web Scraping using Selenium and pytest

Since the demo websites scraped with PyUnit and pytest are the same, there are changes only in the setup-related code. Like web scraping with PyUnit, all setup-related code (i.e., instantiating the browser, setting explicit timeouts, etc.) is segregated in conftest.py.

For starters, conftest.py is a special file in pytest that contains the configuration of the test suite. Hence, hooks, fixtures, and other configurations are all a part of conftest.py

Let’s deep dive into some of the integral parts of the configuration file conftest.py

# Import the locators file
import sys
import os
from os import environ
sys.path.append(sys.path[0] + "/../..")
from pageobject.locators import locators
from pageobject.locators import *

exec_platform = os.getenv('EXEC_PLATFORM')

@pytest.fixture(scope='function')
def driver(request):
    if exec_platform == 'cloud':
        username = environ.get('LT_USERNAME', None)
        access_key = environ.get('LT_ACCESS_KEY', None)

        gridURL = "@hub.lambdatest.com/wd/hub">https://{}:{}@hub.lambdatest.com/wd/hub".format(username, access_key)

        ch_options = webdriver.FirefoxOptions()
        ch_options.browser_version = "latest"
        ch_options.platform_name = "Windows 11"

        lt_options = {}
        lt_options["build"] = "Build: Web Scraping with Selenium & Pytest"
        lt_options["project"] = "Project: Web Scraping with Selenium & Pytest"
        lt_options["name"] = "Test: Web Scraping with Selenium & Pytest"

        lt_options["browserName"] = "Firefox"
        lt_options["browserVersion"] = "latest"
        lt_options["platformName"] = "Windows 11"

        lt_options["console"] = "error"
        lt_options["w3c"] = True
        lt_options["headless"] = True

        ch_options.set_capability('LT:Options', lt_options)

        browser = webdriver.Remote(
            command_executor = gridURL,
            options = ch_options
        )

        yield browser

        def fin():
            if request.node.rep_call.failed:
                browser.execute_script("lambda-status=failed")
            else:
                browser.execute_script("lambda-status=passed")
                browser.quit()

        request.addfinalizer(fin)
    elif exec_platform == 'local':
        options = ChromeOptions()
        options.add_argument("--headless=new")
        browser = webdriver.Chrome(options=options)

        yield browser

        def fin():
            browser.quit()

@pytest.hookimpl(tryfirst=True, hookwrapper=True)
def pytest_runtest_makereport(item, call):
    outcome = yield
    rep = outcome.get_result()

    setattr(item, "rep_" + rep.when, rep)

The @pytest.fixture(scope=’function’) decorator is used for defining a fixture with a function scope.

Depending on the value of the EXEC_PLATFORM environment variable (i.e. cloud or local), the browser is instantiated on the local machine or cloud grid on LambdaTest.

In case you are planning to run the Selenium Python tests (i.e., scrap website under test) on browsers in LambdaTest cloud, instantiate Remote WebDriver with grid URL & browser options as parameters to the webdriver.Remote() method. Capabilities (or browser options) can be obtained from LambdaTest Capabilities Generator.

Since we are performing web scraping with Python, the browser (i.e., Chrome) is instantiated in the headless mode. Headless Chrome is faster than the real browser (with the GUI). Hence, it is best suited for web scraping with Python. Since Selenium 4 (W3C compliant) is used for testing, the w3c *flag is set to *true.

For scraping using Selenium on local headless browsers (e.g., Chrome) on a local grid (or machine), simply set the –headless=new argument for Chrome Options.

Lastly, the yield statement provides the resource (i.e., browser) in the setUp and tearDown sections of the code. Hence, all the resources the browser uses will be cleared once the execution is complete.

With this, we are all set to dive deep into the scraping implementation!

Test Scenario 1 — Scraping LambdaTest YouTube Channel

In this example, meta-data (i.e., title, views, duration, etc.) associated with LambdaTest YouTube Videos is scraped using the PyUnit (or unittest framework).

Since the LambdaTest YouTube channel has more than 600+ videos, a vertical scroll (till the end of the page) is performed so that required information can be scraped from those videos!

Need a great solution for Safari browser testing on Windows? Forget about emulators or simulators — use real online browsers for testing on safari for windows. Try LambdaTest for free!

Implementation (pyUnit)

The file test_yt_scraping.py contains the test logic where the scrap_youtube() method scraps the channel. It returns a list that contains the metadata of the videos.

# Import the locators file
import sys
sys.path.append(sys.path[0] + "/../..")
from pageobject.locators import locators
from pageobject.locators import *

from pageobject.helpers import helpers
from pageobject.helpers import *

from pyunitsetup import pyunit_setup

test_setup = pyunit_setup()

def scrap_youtube(test_url) -> list:
    meta_data_arr=[]
    test_setup.setUp()
    test_setup.browser.get(test_url)

    # Click on 'Accept All' in case the said window comes up
    # This occurs since cookies are cleared and machines are sanitized each run

    # Stack Overflow - https://stackoverflow.com/questions/66902404/selenium-python-click-agree-to-youtube-cookie
    # Locators were located using the below link
    # https://consent.youtube.com/m?continue=https%3A%2F%2Fwww.youtube.com%2F&gl=FR&m=0&pc=yt&uxe=23983172&hl=en&src=1

    # Below issue is not observed in local machines since there is no clean-up of cookies

    try:
        # Wait until the "Accept all" button is clickable
        accept_all = WebDriverWait(test_setup.browser, 5).until(EC.element_to_be_clickable(
            (By.CSS_SELECTOR, "form:nth-child(3) > div > div > button[aria-label= 'Accept all']")))

        # Click the "Accept all" button
        accept_all.click()

        print("Click on Accept all successful")
    except Exception as e:
        # Even if this exception is raised, we can still continue test execution
        # This means that the button was not found & the YouTube channel link has opened successfully
        print(f"'Accept All' button not present, proceed with the tests: {str(e)}")

    meta_data_arr = helpers.scrap_yt_content(test_setup.browser)

    test_setup.tearDown()
    return meta_data_arr

def main():
    meta_data_arr = scrap_youtube(locators.test_yt_url)
    helpers.print_scrapped_content(meta_data_arr)

if __name__ == '__main__':
    main()

To get started, we create an object of the pyunit_setup class which contains implementation of setUp() and tearDown() methods.

The browser instantiation is done in the init() method implemented in pyunitsetup.py. An empty list named *meta_data_arr *is created, and the browser is navigated to the URL under test.

Scraping YouTube content is legal as long as we comply with regulations that deal with personal data and copyright protection. After repeated scraping, we observed that YouTube showed the Consent Page, where we had to programmatically click the Accept all button to navigate to the LambdaTest YouTube channel.

Since the above consent page was shown intermittently, we used the try…catch *loop to counter the above situation. We first locate the Accept all button using the CSS Selector *form:nth-child(3) > div > div > button[aria-label= ‘Accept all’] *Alternatively, we could have also located the element using the XPath locator *//div[@class=’csJmFc’]/form[2]//div[@class=’VfPpkd-RLmnJb’]

To locate elements with ease, we used the POM Builder *that provides CSS Selector & XPath of elements at the click of a button. The *WebDriverWait class is used along with the *element_to_be_clickable *expected condition in Selenium to realize an explicit wait for 5 seconds.

Once the element is located, the *click *method in Selenium is invoked to perform a click operation on the Click all button.

In case the YouTube Consent Page does not show up, we simply handle the exception in the expect block and print the exception.

Now that we are on the LambdaTest YouTube Channel, we invoke the *scrap_yt_content()* method that is a part of the *helpers *class. We will look into its implementation in the further sections of the blog.

Upon successful scraping, a list meta_data_arr containing the scraped content is returned, and the content is printed on the terminal using the *print_scrapped_content()* method.

Implementation (Pytest)

Like PyUnit, the core logic for scraping the YouTube channel is implemented in the scrap_youtube() method in test_yt_scraping.py. It returns a list that contains the metadata of the videos.

Since the majority of the implementation remains the same, we would be focussing only on the changes that are specific to the pytest framework.

# Import the locators file
import sys
sys.path.append(sys.path[0] + "/..")
from pageobject.locators import locators
from pageobject.locators import *

from pageobject.helpers import helpers
from pageobject.helpers import *

@pytest.mark.usefixtures('driver')

class TestYoutubeScraping:
    def test_scrap_youtube(self, driver) -> list:
        meta_data_arr=[]
        driver.get(locators.test_yt_url)

        try:
            # Wait until the "Accept all" button is clickable
            accept_all = WebDriverWait(driver, 5).until(EC.element_to_be_clickable(
                (By.CSS_SELECTOR, "form:nth-child(3) > div > div > button[aria-label= 'Accept all']")))

            # Click the "Accept all" button
            accept_all.click()

            print("Click on Accept all successful")
        except Exception as e:
            print(f"'Accept All' button not present, proceed with the tests: {str(e)}")

        meta_data_arr = helpers.scrap_yt_content(driver)
        helpers.print_scrapped_content(meta_data_arr)

The @pytest.mark.usefixtures(‘driver’) decorator indicates that the driver (i.e., instantiated Chrome browser) fixture must be used in the execution of the test methods.

As mentioned in the earlier section, the click to Accept all button is initiated in case the YouTube consent form is displayed on the screen.

Once you are on the LambdaTest YouTube channel, the *scrap_yt_content()* method is invoked to scrap the channel content. Lastly, the scraped content is printed on the screen.

Since the rest of the implementation is the same as in the PyUnit framework, hence we are not touching upon those aspects in this section.

Run your Selenium Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free

Implementation (Core Scraping Logic)

The helpers.py file contains the core implementation for scraping the LambdaTest YouTube channel.

# Import the locators file
import sys
from pageobject.locators import locators
from pageobject.locators import *

def create_actions(driver):
    actions = ActionChains(driver)
    return actions

def create_waits(driver, duration):
    # Explicit wait of 10 seconds
    wait = WebDriverWait(driver, duration)
    return wait

class helpers(object):    
    def scrap_yt_content(driver)->list:
        meta_data_arr=[]
        # Explicit wait of 10 seconds
        wait = create_waits(driver, 10)

        actions = create_actions(driver)

        # Explicit wait of 10 seconds
        wait = WebDriverWait(driver, 10)

        # Wait for 10 seconds till the Document State is not complete
        wait.until(lambda driver: driver.execute_script('return document.readyState') == 'complete')

        # Once the page has loaded, scroll to the end of the page to load all the videos
        # Scroll to the end of the page to load all the videos in the channel
        # Reference - https://stackoverflow.com/a/51702698/126105
        # Get scroll height
        start_height = driver.execute_script("return document.documentElement.scrollHeight")

        # Repeat scrolling until reaching the end of the page
        # Taking cues from my own blog https://www.lambdatest.com/blog/scraping-dynamic-web-pages/
        while True:
            # Scroll to the bottom of the page
            driver.execute_script("window.scrollTo(0, " + str(start_height) + ")")
            # Wait for the content to load
            time.sleep(2)
            scroll_height = driver.execute_script("return document.documentElement.scrollHeight")
            if (scroll_height == start_height):
                # If heights are the same, we reached the end of page
                break
            # print("scroll_height = " + str(scroll_height))
            time.sleep(2)
            start_height = scroll_height

        time.sleep(2)

        elem_1 = driver.find_elements(By.CSS_SELECTOR,
            "#dismissible > #details")

        for video_metadata_1 in elem_1:
            elem_2 = video_metadata_1.find_element(By.CSS_SELECTOR,
                "#meta")

            elem_3 = elem_2.find_element(By.CSS_SELECTOR,
                "#video-title")

            elem_4 = elem_2.find_element(By.CSS_SELECTOR,
                "#metadata > #metadata-line > span:nth-child(3)")

            elem_5 = elem_2.find_element(By.CSS_SELECTOR,
                "#metadata > #metadata-line > span:nth-child(4)")

            video_title = elem_3.get_attribute('innerText')
            video_views = elem_4.get_attribute('innerText')
            video_time = elem_5.get_attribute('innerText')

            # Create a dictionary of the video meta-data
            meta_data_dict = {
                'video title': video_title,
                'video views': video_views,
                'video duration': video_time
            }

            meta_data_arr.append(meta_data_dict)

        return meta_data_arr

    def print_scrapped_content(meta_data):
        for elem_info in meta_data:
            print(elem_info)

Code Walkthrough

To get started, we wait for a maximum duration of 10 seconds till the document (or page) is fully loaded (i.e. Document.readyState is equal to complete). Feel free to check out the detailed DOM tutorial if you want a quick refresher about the nuances of DOM.

Once the page is loaded, we first get the scrollable height of the document using the JavaScript function document.documentElement.scrollHeight. Before doing so, we maximize the browser window since that is considered one of the best practices in Selenium automation.

Next, we run a while loop where a vertical scroll is performed using the window.scrollTo() method with *document.documentElement.scrollHeight *as the input argument.

In order to see the window.scrollTo() method in action, open the LambdaTest YouTube channel on your browser. Then trigger the following commands in the browser console:

document.documentElement.scrollHeight
window.scrollTo(0, document.documentElement.scrollHeight)

In the implementation shown above, we perform the above two actions till the end of the page is reached. This is when we break from the while loop!

The video meta-data (i.e., name, views, duration, etc.) is present in the div with ID details, *which is under another div *dismissible. The said element(s) are located using the CSS Selector (i.e., dismissible > #details).

As seen in the Inspect Tools screenshot, there are 581 entries (or elements) when searched with CSS Selector (i.e., *dismissible > #details). *In summary, the LambdaTest YouTube channel has 581 videos when writing this blog on web scraping with Python.

Next up, we locate the element(s) using CSS Selector #meta, which is nested under the div #details.

Now that we have located the #meta tag, we procure the video title, which is nested in the #meta tag. The title of the video is located using the #video-title CSS Selector.

As seen below, the innerText attribute of the element (CSS Selector #video-title) provides the title of the video!

Automate Cypress testing and perform browser automation testing with LambdaTest. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

The next task is to find the video views, which are located using the nested CSS Selector #metadata > #metadata-line > span:nth-child(3)

As seen in the Inspect Tools screenshot, #metadata-line is nested inside #metadata (i.e., Element with ID #metadata-line is a child of an element with ID #metadata). To find the element’s locator that gives video views, simply hover over the views (of the first video) and copy the selector from the Inspect tools in the browser.

The pseudo class nth-child(3) selects the third child span element among the direct children of the element with the ID metadata-line. Hence, the element located using CSS Selector #metadata > #metadata-line > span:nth-child(3) provides the views of the video in the earlier step.

Locating the Video Views element using Inspect Tools

The innerText attribute of the located element provides the number of views of the said video.

On similar lines, the publishing date of the respective video is also procured using the innerText attribute of the element located using the CSS Selector #metadata > #metadata-line > span:nth-child(4).

All the above-mentioned steps are executed in a for loop that iterates through the elements that were located using driver.find_elements(By.CSS_SELECTOR, “#dismissible > #details”)

Automate Cypress testing and perform browser automation testing with LambdaTest. Our Cypress cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

Test Scenario 2 — Scraping LambdaTest eCommerce Playground

In this example, we scrap the product meta-data (i.e., product name and price) from LambdaTest eCommerce Playground. As mentioned earlier, the scraping logic works seamlessly on the local grid and cloud Selenium grid like LambdaTest.

Implementation (Core Scraping Logic)

Since the overall setup & configuration-related implementation remain unchanged, we would directly deep dive into the scraping implementation.

Akin to the YouTube test scenario, the helpers.py file contains the core implementation where the *scrap_ecomm_content()* method is responsible for scraping the eCommerce Playground. It returns a list that contains the metadata of the SKUs on the page.

# Import the locators file
import sys
from pageobject.locators import locators
from pageobject.locators import *

def create_actions(driver):
    actions = ActionChains(driver)
    return actions

def create_waits(driver, duration):
    # Explicit wait of 10 seconds
    wait = WebDriverWait(driver, duration)
    return wait

class helpers(object):
    def scrap_ecomm_content(driver)->list:
        meta_data_arr=[]
        # Explicit wait of 10 seconds
        wait = create_waits(driver, 10)

        actions = create_actions(driver)

        element_cat = wait.until(EC.visibility_of_element_located((By.XPATH,
                locators.shopcategory)))

        # Move to the element and perform click operation
        actions.move_to_element(element_cat).click().perform()

        element_phcat = wait.until(EC.visibility_of_element_located((By.XPATH,
                locators.phonecategory)))

        actions.move_to_element(element_phcat).click().perform()

        nested_elements = wait.until(EC.visibility_of_element_located((By.XPATH,
            "//div[@id='entry_212391']//div[@id='entry_212408']//div[@class='row']")))

        # Tough nut : 2 - nested locators!
        actual_items = nested_elements.find_elements(By.CLASS_NAME,
                "product-layout.product-grid.no-desc.col-xl-4.col-lg-4.col-md-4.col-sm-6.col-6")

        count = len(actual_items)

        for ind_elem_props in actual_items:
            nested_product_name_elem = ind_elem_props.find_element(By.CSS_SELECTOR,
                "div.product-thumb > div.caption")

            ################ Product Name ################
            nested_title_elem = nested_product_name_elem.find_element(By.CSS_SELECTOR,
                    ".title .text-ellipsis-2")

            ################ Price #######################
            nested_price_elem = nested_product_name_elem.find_element(By.CSS_SELECTOR,
                    ".price .price-new")

            # Create a dictionary of the meta-data of the items on e-commerce store
            meta_data_dict = {
                'product image': nested_title_elem.get_attribute('href'),
                'product name': nested_title_elem.text,
                'product price': nested_price_elem.text
            }

            meta_data_arr.append(meta_data_dict)

        return meta_data_arr

    def print_scrapped_content(meta_data):
        for elem_info in meta_data:
            print(elem_info)

Code Walkthrough

Let’s directly look into the major aspects of the scrap_ecomm_content() method!

First, we create an instance of the ActionChains class to perform mouse movement operations on the page. We suggest having a look at our detailed blog on *ActionChains *in Selenium Python in case you are new to ActionChains or want to have a quick refresher of this important concept!

*WebDriverWait and *ExpectedConditions *in Selenium are used to initiate an explicit wait till the visibility of a specified element is true. The element in question is the menu item that is located using the XPath *“//a[contains(.,’Shop by Category’)]”

Once the menu is visible, the move_to_element() method of ActionChains class is used to move (or focus) on the located menu item. Since only operation (i.e., click) is involved in the chain, we invoke the click() and perform() methods to trigger the required action.

Now that we are on the Menu, the menu item containing Phone, Tablets & Ipod uses the XPath selector. Once the menu item is located, the combination of move_to_element() and click operations is performed to open the Product Page.

Now that we are on the Product Page, we wait for the visibility of the grid containing the respective products. By default, 15 products are available in a single go.

Nested XPath locator //div[@id=’entry_212391′]//div[@id=’entry_212408′]//div[@class=’row’] is used for locating the grid containing the products. Alternatively, you can also use the CSS Selector to locate the grid.

Simply right-click on the row and choose Copy → Copy CSS Selector to locate the grid using CSS Selector. You can check out our XPath vs CSS Selectors guide to get more insights into the advanced features of these selectors.

Now that we have located the grid (containing the 15 products), the next step is to locate every row housing the corresponding product. As shown below, we have <div>’s for each nested product under the locator used in the previous step.

The *find_elements() *method in Selenium is used along with the Class Name selector to find the elements containing product(s) information. Since there are 15 products on the page, the length of the list returned by the find_elements() method will also be 15!

This Cypress automation testing tutorial will help you learn the benefits of Cypress test automation, and how to install Cypress and execute Cypress automation testing over scores of browsers and operating systems online.

Next, we run a for loop and iterate through the list to scrap details of every product in the list. Since there are 15 products on the page, the loop will be executed 15 times.

As seen below, The element(s) located using CSS locator div.product-thumb > div.caption provides the meta-data (i.e., product name & price) of every product on the page.

With the meta-data handy, the next step is to find the Product Name from the element located in the previous step.

As seen from the DOM layout, the element located using nested CSS Selector .title .text-ellipsis-2 provides product details.

The text attribute of the element provides the Product Name of the respective product.

On similar lines, the href attribute of the located element provides the link to the product (e.g., Product Link).

Like the earlier step, the price of the current product is scraped by locating the element using the nested CSS Selector .price .price-new

Now that the element is located, the text attribute of the element gives the price of the product.

Finally, the scrap_ecomm_content() method returns a dictionary of the scraped content of the page under test!

Test your website or web app online for iOS browser compatibility. Perform seamless cross browser testing on the latest iPhone tester Simulator. Try for free!

Execution (PyUnit + Selenium)

As stated earlier, we can use the browser on a local machine (or grid) and cloud Selenium grid.

Set environment variable EXEC_PLATFORM to **local *using Chrome browser (headless mode) with Selenium for web scraping. Invoke the command *make scrap-using-pyunit to start scraping content from the test website(s).

As shown below, the Accept all button does not appear when the scraping is done on a local machine.

On the other hand, the Accept all button is seen when the scraping is done using Chrome (headless mode) on cloud Selenium Grid.

As seen below, the content from the LambdaTest YouTube channel and LambdaTest eCommerce playground was scrapped successfully.

Set environment variable EXEC_PLATFORM to **cloud **for using Chrome browser (headless mode) on cloud Selenium Grid.

Log on to the LambdaTest Automation Dashboard to view the status of the test execution.

As seen below, the test execution on LambdaTest was successful!

Execution (pytest + Selenium)

Like earlier, set EXEC_PLATFORM to **local *for using Chrome browser (headless mode) with Selenium for web scraping with Python. Invoke the command *make scrap-using-pytest to start scraping content from the test website(s).

As seen below, scraping data from the test websites was successful.

Set environment variable EXEC_PLATFORM to the **cloud *and invoke *make scrap-using-pytest for using Chrome browser (headless mode) on cloud Selenium Grid.

Shown below is the status on the dashboard, which indicates that web scraping using Selenium and pytest was successful.

Explore Jest tutorial, your go-to guide for mastering Jest testing. Run Jest automation tests in parallel across multiple browser and OS combinations.

Web Scraping using Beautiful Soup and Selenium

For a demonstration of web scraping with Python using Beautiful Soup and Selenium, we would be scraping content from the following websites:

We are using the combination of Beautiful Soup and Selenium for a very specific reason.🙂As you can see, both the test websites have dynamic content which is where Selenium has an upper-hand over Beautiful Soup.

Selenium is used for performing actions (e.g., scrolling, clicking, etc.) on the page (or document) so that the content to be scraped is available for our perusal. On the other hand, Beautiful Soup is used for parsing and navigating the structure of the HTML page.

The prerequisites and directory structure are already covered in the earlier sections of this blog on web scraping with Python. BeautifulSoup4 (or bs4) & Selenium (v 4.13.0) are used for scraping the ScrapingClub website, whereas bs4, along with Requests (v 2.31.0) help in scraping the eCommerce playground product page(s).

Demonstration: Scraping eCommerce Playground

In this test scenario, we would scrap the products from the eCommerce Playground product page. The website uses pagination, and 15 products are displayed on a single page.

Navigate to the eCommerce Playground product page.
Send an HTTP GET request to the URL using the Requests library.
Using bs4, scrap product information from all the products of the said category.

Implementation

Similar to the configuration for the PyUnit & pytest frameworks, the locator & URL details are present in locators.py.

The core scraping logic is implemented in *test_ecommerce_scraping.py.* Let’s dive deep into the same!

# Beautiful Soup Official Documentation - https://www.crummy.com/software/BeautifulSoup/bs4/doc/

# Import the locators file
import sys
from pprint import pprint
sys.path.append(sys.path[0] + "/../..")

from pageobject.locators import locators
from pageobject.locators import *

from pageobject.helpers import helpers
from pageobject.helpers import *

def scrap_ecommerce(url) -> list:
    response = requests.get(url)

    if response.status_code != 200:
        print(f"Unable to fetch the page. Status code: {response.status_code}")
        return None

    soup = BeautifulSoup(response.text, 'html.parser')

    rows = soup.select('.product-layout.product-grid.no-desc.col-xl-4.col-lg-4.col-md-4.col-sm-6.col-6')

    meta_data_arr = []

    for row in rows:
        link = row.find("a", class_='carousel d-block slide')
        name = row.find("h4", class_='title')
        price = row.find("span", class_='price-new')

        # Create a dictionary of the meta-data of the items on e-commerce store
        meta_data_dict = {
            'product link': link.get_attribute_list('href'),
            'product name': name.get_text(),
            'product price': price.get_text()
        }

        meta_data_arr.append(meta_data_dict)
    return meta_data_arr

# Pagination - 1:5
# Page 1: https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57&page=1
# Page 5: https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=57&page=5
if __name__ == '__main__':
    for iteration in range(1,6):
        test_url = locators.test_bs4_url + "&page=" + str(iteration)
        meta_data_arr = scrap_ecommerce(test_url)
        print('\n')
        print("Product Page = " + test_url)
        print("*********************************************************************************************************\n")
        helpers.print_scrapped_content(meta_data_arr)

Code Walkthrough

Inside the main *construct, we set up the test URL, which constitutes the base URL appended by the page number (i.e. &*page=< page-number >).

Since there are 5 pages in total for the said product category, the scraping implementation is executed in an interactive loop (from 1..6).

To get started with scraping, an HTTP GET request is initiated using the get() method of the requests library. The method takes the URL under test as the input parameter and returns a response object.

The status code (i.e., status_code) attribute of the response object is compared with 200 (i.e., STATUS_OK). If the status_code is not 200 (e.g., 404, 403, etc.), the test is terminated.

The response.text attribute contains the HTML content of the page, which is retrieved as a string. As stated earlier, the HTML parser (i.e., html.parser), the default parser in bs4, is used to parse the HTML content.

BeautifulSoup(response.text, ‘html.parser’) returns a BeautifulSoup object that will be used throughout scraping. The select() method of Beautiful Soup finds elements using the CSS Selector property — .product-layout.product-grid.no-desc.col-xl-4.col-lg-4.col-md-4.col-sm-6.col-6

As expected, 15 elements match the CSS Selector since there are 15 products on the page. The select() method returns a list that will be further used for iteratively scraping information (i.e., name, cost) of each product.

Next up, we run a for loop for scraping information of all the 15 products (or elements) under the div located in the previous step.

Test native, hybrid, and web apps on any mobile OS with our free Android emulator online. Sign up to optimize app performance.

The product link is obtained by locating the element using the find() method of Beautiful Soup. As seen in the Inspect Tools screenshot above, the first argument is the tag that needs to be searched for (i.e., “a” — anchor tag), and the second is the CSS Class attribute.

Link to the product is procured by using the get_attribute_list() method with the located element. In case you need more information on the find() method of Beautiful Soup, we recommend checking out the Beautiful Soup Official Documentation.

On similar lines, the product name is also scraped by using the find() method in Beautiful Soup. In this case, the first argument is the “h4” tag, and the second argument is the Class Name locator “title”.

Finally, the *get_text()* method of Beautiful Soup, when used with the recently located element, provides the product name of the current product.

The last step is to scrap the price of the respective product. As shown below, the text under the element with Class Name “price-new” provides the product price.

Like before, the find() method of Beautiful Soup is used with “span” (i.e., tag to be located) as the first argument and Class Name “price-new” as the second argument. The get_text() method returns the text inside the element.

Finally, a dictionary (i.e., meta_data_dict) of the scraped information (i.e., product link, name, and price) is created, and the same is appended to the list (i.e., meta_data_arr).

The same steps are repeated for all the other product pages (i.e., Product Page 1 → Product Page 5), and the scraped data is displayed on the screen.

Demonstration: Scraping Infinite Scrolling website

In this test scenario, we would be scraping the ScrapingClub website that has content loaded on a dynamic basis. Since the website involves dynamic content, the combination of Selenium & Beautiful Soup is used for web page interactions & scraping.

Navigate to Infinite Scroll Page.
Scroll till the end of the page.
Scrap product content using Beautiful Soup.

Implementation

Akin to the PyUnit & pytest frameworks, the locator & URL details are present in locators.py

The core scraping logic is implemented in *test_infinite_scraping.py.* Let’s deep dive into the same!

# Selenium WebDriver used for infinite scrolling
# Beautiful Soup used for scraping content

# Beautiful Soup Official Documentation - https://www.crummy.com/software/BeautifulSoup/bs4/doc

import sys
# Import the locators file
import os
from pprint import pprint
sys.path.append(sys.path[0] + "/../..")

from pageobject.locators import locators
from pageobject.locators import *

from pageobject.helpers import helpers
from pageobject.helpers import *

exec_platform = os.getenv('EXEC_PLATFORM')

def scrap_inifite_website(url) -> list:
    meta_data_arr = []

    if exec_platform == 'cloud':
        username = environ.get('LT_USERNAME', None)
        access_key = environ.get('LT_ACCESS_KEY', None)

        gridURL = "@hub.lambdatest.com/wd/hub">https://{}:{}@hub.lambdatest.com/wd/hub".format(username, access_key)

        ch_options = webdriver.ChromeOptions()
        ch_options.browser_version = "latest"
        ch_options.platform_name = "Windows 11"

        lt_options = {}
        lt_options["build"] = "Build: Web Scraping with Selenium & Beautiful Soup"
        lt_options["project"] = "Project: Web Scraping with Selenium & Beautiful Soup"
        lt_options["name"] = "Test: Web Scraping with Selenium & Beautiful Soup"

        lt_options["browserName"] = "Chrome"
        lt_options["browserVersion"] = "latest"
        lt_options["platformName"] = "Windows 11"

        lt_options["console"] = "error"
        lt_options["w3c"] = True
        lt_options["headless"] = True

        ch_options.set_capability('LT:Options', lt_options)

        driver = webdriver.Remote(
            command_executor = gridURL,
            options = ch_options
        )
    elif exec_platform == 'local':
        options = ChromeOptions()
        options.add_argument("--headless=new")
        driver = webdriver.Chrome(options=options)

    driver.get(url)

    # Took some support from https://stackoverflow.com/a/41181494/126105
    start_height = driver.execute_script("return document.documentElement.scrollHeight")

    while True:
        # Scroll to the bottom of the page
        driver.execute_script("window.scrollTo(0, " + str(start_height) + ")")
        # Wait for the content to load
        time.sleep(2)
        scroll_height = driver.execute_script("return document.documentElement.scrollHeight")
        if (scroll_height == start_height):
            # If heights are the same, we reached the end of page
            break
        time.sleep(2)
        start_height = scroll_height

    time.sleep(2)

    # Why features='html.parser' is required
    # The code that caused this warning is on line 44 of the file <file>.
    # To get rid of this warning, pass the additional argument 'features="html.parser"'
    # to the BeautifulSoup constructor.
    soup = BeautifulSoup(driver.page_source, features='html.parser')

    # Instantiated Chrome instance is no longer required
    # since we have already read the source
    driver.quit()

    # Code changes as per 28/07/2023
    # In case if elements are not located, please change the locators accordingly
    rows = soup.find_all('div', class_='w-full rounded border post')
    print("\nTotal items on " + url + " are " + str(len(rows)) + "\n")

    for row in rows:
        dress = row.find('h4')
        link = dress.find('a')
        price = row.find('h5')

        # Create a dictionary of the meta-data of the items on e-commerce store
        meta_data_dict = {
            'dress': dress.text.strip(),
            'link' : link.get_attribute_list('href'),
            'price': price.text.strip()
        }

        meta_data_arr.append(meta_data_dict)
    return meta_data_arr

if __name__ == '__main__':
    meta_data_arr = scrap_inifite_website(locators.test_bs4_infinite_url)
    helpers.print_scrapped_content(meta_data_arr)

Code Walkthrough

Inside the main *construct, we invoke the *scrap_inifinite_website() method that is primarily responsible for scraping the website under test.

Since we are using Selenium for performing actions on the page, the EXEC_PLATFORM environment variable helps us choose between local grid (or machine) and the cloud Selenium Grid.

We have already covered Remote WebDriver and Headless browser testing in the earlier sections of the blog.

Since the content is loaded dynamically (i.e., on page scroll), scroll till the end of page is performed using the combination of the execute_script() method with document.documentElement.scrollHeight as the input argument.

Content & Images loaded on a dynamic basis

Now that the page load is complete, create a Beautiful Soup object that parses the page source obtained using Selenium. You can check out our detailed blog that deep dives into getting page sources with Selenium WebDriver for more information on retrieving page sources using Selenium.

Since we already have the page source, it’s safe to release resources used by the instantiated browser instance.

Discover 31 best automation testing tools in 2023 for powerful and efficient testing solutions.

Next, the find_all() method of Beautiful Soup is used with “div” (i.e., tag to be located) as the first argument and Class Name “w-full rounded border post” as the second argument. It returns a list of elements that meet the specified conditions.

As seen from the Inspect Tools screenshot, the length of the list returned by find_all() method should be 60 (i.e. 60 products are present on the page).

Next up, we use the for loop for iteratively scraping information (i.e. dress name, link, price) of each product.

The find() method of Beautiful Soup is used to locate the element with input as “h4” tag.

The text() attribute of the located element provides the product name (e.g., Short Dress). The leading & trailing spaces of the output are done using the strip() method.

The “href” attribute of the element located earlier using the “h4” tag [i.e., dress = row.find(‘h4’)] gives the product link.

On similar lines, the price of the respective product is obtained by locating the element using the find() method. The method takes the “h5” tag as the input argument since the text() attribute of the element contains the product price.

Deep dive to learn about test automation; what is automation testing,its uasage, types and also gain insights on how to get started with automated testing.

Like the earlier step, leading & trailing spaces from the output of text() attribute to get the final price of the respective product.

With this, we have successfully scraped the meta-data of products from the ScrapingClub (Infinite Scrolling) website. Let’s trigger the same on the local as well as LambdaTest Cloud Selenium grid.

Execution

As stated earlier, we can instantiate the Chrome browser (in headless mode) on a local machine (or grid) as well as cloud Selenium grid.

Set environment variable EXEC_PLATFORM to local for using cloud Selenium grid. Invoke the command make scrap-using-beautiful-soup to start scraping content from the test website(s).

As seen below, we are able to scrap content from the LambdaTest E-commerce Playground Product Page(s) and ScrapingClub website.

Set environment variable EXEC_PLATFORM to cloud for using Cloud Selenium Grid on LambdaTest.

Shown below is the status on the dashboard, which indicates that web scraping with Python using Beautiful Soup and Selenium was successful.

With this, we have covered web scraping with Python using popular libraries (or tools) like Selenium (with PyUnit & pytest) and Beautiful Soup. The popularly-quoted Spider-Man theme of “With great power, comes great responsibility” also applies to web scraping!

This is because web scraping with Python must be performed while taking legal and ethical considerations into account. It is unethical to scrape confidential (or sensitive) information from any website.

Web Scraping Done Right!

As stated, web scraping is a super-powerful tool to have in your data collection armory. However, its benefits should be leveraged with utmost caution! Python provides numerous tools (or libraries) for web scraping, making it one of the preferred languages for scraping web content.

Though the choice of web scraping tool purely depends on the requirements, Selenium can be preferred for scraping dynamic web content. On the other hand, Beautiful Soup is one of the preferred choices for scraping static web content.

Playwright is another popular framework for scraping web content. You can refer to our detailed blog on Web Scraping with Playwright and Python in case you intend to leverage the framework for scraping.

As a part of the web scraping series, I dabbled into Web Scraping with C# using Selenium. To summarize, web scraping is a great tool that helps make the most of public data, but it should be used with utmost responsibility.🙂

Happy Scraping !

This blog explains different types of automation testing along with their benefits and best practices. Also we have discussed different frameworks and tools at the end.

Frequently Asked Questions (FAQs)

Is Python good for web scraping?

Yes, Python is widely recognized as an excellent programming language for web scraping. Python offers several libraries and frameworks, such as BeautifulSoup and Scrapy, that simplify the web scraping process. Its simplicity, readability, and rich ecosystem of packages make it a popular choice for web scraping tasks. Additionally, Python is platform-independent, which means you can use it on various operating systems to collect data from websites efficiently.

What is web scraping with Python?

Web scraping with Python refers to automatically extracting data from websites. Python provides various libraries and frameworks, such as BeautifulSoup, Scrapy, and Requests, that enable developers to write scripts to access web pages, parse the HTML content, and extract specific information or data. This data can be used for various purposes, including data analysis, research, content aggregation, or any other application where web data is needed. Web scraping with Python is a versatile and powerful technique for collecting information from the internet.

Is it legal to web scrape?

The legality of web scraping depends on various factors, including the website’s terms of service, the nature of the data being collected, and local or international laws. Here are some key points to consider:

Website’s Terms of Service: Websites often have service or usage policies that specify whether web scraping is allowed or prohibited. It’s essential to review and comply with these terms. Violating a website’s terms of service could lead to legal issues.
Publicly Accessible Data: Web scraping publicly accessible data, such as information without logging in, is typically considered more acceptable. However, this does not grant unlimited rights to use or redistribute the data.
Copyright and Intellectual Property: If the data being scraped is protected by copyright or contains intellectual property, scraping and using that data may infringe on those rights.
Personal Data and Privacy: Scraping and using personal data without consent can raise privacy and legal concerns, particularly under data protection laws like the GDPR in the European Union.
Anti-Competitive Behavior: Web scraping for anti-competitive purposes, like price scraping to undercut competitors unfairly, may be subject to legal action under antitrust laws.
Rate Limiting and Politeness: It’s advisable to implement rate limiting and be polite in your scraping activities. Excessive requests can strain a website’s servers and may be viewed as a denial-of-service attack.
Laws and Jurisdictions: The legal aspects of web scraping can vary by jurisdiction. What’s legal in one country may not be in another.

To ensure compliance with laws and ethical standards, it’s essential to consult with legal experts if you have concerns about the legality of your web scraping activities, particularly when dealing with sensitive or proprietary data. Additionally, always respect a website’s terms of service and robots.txt file, which can specify rules for web crawlers.

Auto Healing in Selenium Automation Testing

himanshuseth004 — Fri, 10 Nov 2023 11:00:42 +0000

A number of challenges always loom large as the Application Under Test (AUT) undergoes endless cycles of bug fixes and enhancements. As the AUT grows in size and complexity, it will also trickle down on the automated test suite’s stability, reliability, and maintainability. All of this eventually results in intermittent test failures in the CI/CD pipeline, thereby impacting the overall health of the pipeline.

Over & above, there is a higher probability of witnessing unforeseen errors when the application is deployed across diverse environments (e.g., staging, production, etc.). As per a survey conducted by LambdaTest, test flakiness or test instabilities is one of the major challenges with tests devised using test automation frameworks like Selenium.

*Poll Source*

Instabilities in the test results normally occur due to internal and external factors, most of which can be controlled by focusing on efficient & scalable test design and execution. Flaky test design, incorrect wait strategies, dependent tests, and inadequate test isolation are some of the ‘controllable’ factors that lead to test flakiness.

Auto healing of automated tests helps improve the effectiveness of test suite(s)/test(s) and increases the ROI of test automation. In this blog, we deep-dive into the nitty-gritty of auto healing in Selenium and how to reduce test maintenance costs with the auto healing feature (or Selenium capability) on LambdaTest Continuous Quality Cloud.

Looking for a unique username? Generate usernames with our Random Username Generator! Quick, easy, and fun.

Flakiness Conundrum in Test Execution

Picture the below scenario that can cause nightmares to engineer:

The test code is all implemented and working fine, even when they are integrated in the CI/CD pipeline! Voila, CI/CD shows all green. 🙂Hell breaks loose when you realize that the same test suite fails in the next release without a single line of code change.
Time to don the hat of a debugger to locate and fix issues that seem to never exit in the first place .🙁

Now, the integral question that needs an immediate answer is, Why did the passing tests fail all of a sudden? It’s time to dissect the problem. First, upon debugging, you realize the pipeline configuration and network setup are all fine. Time to dig further to debug the underlying issue 🤔

Well, you finally realize that test flakiness was introduced due to locator changes in the front end (or UI).

*Overhead costs due to flaky tests*

The stability, maintainability, and reliability of the regression test suite(s) will increase multi-fold if the intermittent failures are healed before they make their way into Continuous Testing with CI/CD. In the scenario documented earlier, flakiness was due to the changes in the locators in the updated UI.

Apart from this, intermittent issues (e.g., slow response times, network flakiness, etc.) with external dependencies are some of the ‘external’ factors that can cause flakiness. Determinism is a fundamental property of any automation test suite, which means that the execution result shouldn’t change if there are no changes in the source code.

Irrespective of the source of flakiness, the bottom line is that it needs to be identified and fixed, or else it impacts release cycles along with the ROI of test automation. In a nutshell, there needs to be a definitive answer to the flakiness conundrum since the impact of flaky tests is not limited to only test execution!

Major Causes of Test Flakiness

It turns out that developers (and QA engineers) spend more time maintaining, testing, and securing existing code than developing new code. In a nutshell, close to one-third of the time is spent on ‘Code Maintenance’!

*How Developers Spend Their Time*

And flakiness in tests also contributes to the maintenance and longevity aspects of the test suites (or test scenarios). An ACM Survey on Flaky Tests revealed that close to 59 percent of developers have encountered flay tests daily, monthly, or weekly. As aptly mentioned in the Costs & Consequences section of the survey:

False alarms are the dominant consequence of flaky tests.
Akin to test failures, flaky test failures should not be ignored.
Frequent flaky tests can be highly threatening to the efficiency of the CI.

Now that we know that test flakiness can have a detrimental effect on the CI, release cycles, and developer’s productivity, let’s look at some of the common causes of flaky tests:

Protect your sensitive information with our Hash Calculator. Create secure, one-way hashes in no time and keep your data safe from hackers.

Frequent Application Changes

You would have faced the “Inconsistent test failures” syndrome when automating UI interactions using frameworks like Selenium. Well, these tests abruptly start failing without any changes in the code under test.

Usage of unreliable locators in Selenium or changes in locators owing to UI changes could result in intermittent test failures. Major overhaul in the UI is not referred to as UI changes. The changes could be minor updates in the UI and/or locators that make the tests unreliable & flaky.

Consider a demo login page that lets users sign up & login using email and social accounts (i.e., LinkedIn, X, and Facebook). Load the page by triggering the php -S localhost:8080 command on the terminal.

Let’s consider a simple scenario where UI interactions are automated for the email-address element:

Before the locator changes

By.id(“email”) is used for locating the email-address element using the ID locator.

Here is how *findElement *in Selenium is used for entering the email address in the newly located element:

After the locator changes

Consider a hypothetical (yet realistic) scenario where the ID of the email-address element is changed from “email” to “email-address” during the design and/or code updation process.

For demonstration purposes, we have changed the ID by invoking the document.getElementById() method on the Inspect console.

As seen above, the updated ID of the email-address element is “email-address”. The repercussion of this small change is huge, as the ID passed to the By class needs an update for the test execution to succeed:

Locating element using old ID 👇

Locating element using new ID

In case the test is executed with the old ID, it would result in a NoSuchElementException, which eventually leads to the failure of the entire regression test suite. You can check out our comprehensive blog on Selenium Exceptions that deep dives into all the common exceptions you might encounter during automated testing.

The example being highlighted above just scratches the surface when it comes to test flakiness! It can have a snowball effect on the entire test suite(s), test releases, as well as CI. Auto healing of locators can be instrumental in overcoming the brittleness caused by static locators. We will look at auto healing in Selenium in the further sections of the blog.

Make your data more secure with our easy-to-use CRC32B Hash Calculator. Create secure hashes easily and keep your information safe from prying eyes. Get started now!

Flaky Locator Strategy

There is an option to choose from a range of locators, like ID, Name, CSS Selector, XPath, etc., for locating elements in the DOM. Though you have options, choosing the best-suited locators for the automation tests is recommended. This helps improve the reliability, maintainability, and stability of the test suites.

Over & above, you also need to take care of the challenges posed by dynamic website content and lazy loading of images. For instance, the LambdaTest eCommerce playground has a significant number of images that are loaded using the lazy loading technique.

Hence, it is recommended to choose dynamic locators that can accommodate the dynamic nature of the website content. You can check out the Selenium locators strategy blog that deep-dives into the best practices for using locators with Selenium WebDriver.

Synchronization Issues

Several external factors (e.g., network throttling, dependency on external services, etc.) can contribute to test flakiness. To counter such problems, you need to invest in improving the robustness and reliability of the tests.

Handling asynchronous calls in Selenium is also important since AJAX requests, animations, dynamic elements, async calls to other layers, etc., are common in today’s applications. As stated in the ACM Survey on Flaky tests, asynchronous waits are a major contributor to flakiness in front-end testing.

Close to 37 percent of commits under the asynchronous waits category were attributed to incorrect handling of waits for asynchronous calls. For instance, using *Thread.sleep() *in Selenium is a bad practice since it is a blocking call that will eventually elongate the overall test execution time.

Using Explicit Waits in conjunction with Expected Conditions in Selenium can be leveraged such that the test waits for a certain duration until the specified condition is met. Fluent Wait is another option for handling synchronization issues, particularly when the tests invoke asynchronous calls and intend to wait for it to finish before evaluating assertions.

Covering all the causes is beyond the scope of this blog! Apart from the causes mentioned above, here are some of the common causes of test flakiness:

Flaky test infrastructure
Inconsistency across third-party libraries
Flaky test scripts
Data dependencies

You can refer to common causes of test flakiness that delves into every pointer in great detail. For the remaining part of the blog, we will focus on how auto healing in Selenium can be leveraged to enhance the robustness of test suites by handling unexpected errors arising due to frequent UI changes.

Note: Feature and approach are used interchangeably throughout the remaining course of this blog.

What is Auto Healing in Selenium?

Auto healing automation is also referred to as self healing automation. Auto healing of Selenium locators (or Selenium) is a dynamic approach in test automation that helps overcome the brittleness associated with traditional static locators.

Traditional Selenium tests without the auto healing feature would fail in case there is an underlying change in the web locators. Auto healing brings much-needed intelligence to the automated tests, thereby enabling them to dynamically adapt to the changes in the document (i.e., application/website).

This is driven by state-of-the-art AI (Artificial Intelligence) and ML (Machine Learning) algorithms.

This further helps in the automatic recovery of the tests from certain failures that are encountered during the process of test execution. The automated test recovery catalyzed by the auto healing approach also improves the overall reliability of the CI pipeline.

A loose yet relevant analogy:

Akin to applying bandages on a wound, auto (or self) healing automatically heals the tests when they encounter a wound (i.e., error).

In the latter sections of the blog, we will focus on the nuances of auto healing in Selenium and how automation engineers can leverage the Auto Heal feature (on LambdaTest) to improve the resilience and robustness of the tests.

Looking for a quick way to generate hashes? Try our MD4 Hash Calculator to get strong hash values for your data and protect your information from cyber threats.

How does Auto Healing in Selenium Work?

Though there are a few AI-powered open-source libraries for auto healing, we would be limiting our discussion to auto healing feature on LambdaTest. Let’s have a bird’s-eye view at the internal working of the said functionality (auto healing in Selenium):

Auto healing in Selenium on LambdaTest intelligently adapts locators by combining attributes and the test’s context for ensuring the test’s stability and resilience
The document (i.e., web page) is continuously scanned during runtime for any changes in the DOM
Once the element is successfully located, the DOM path of the element is fetched and saved for future reference
In case the element is referenced using the same locator (but not present on the page), the auto healing algorithm generates new locators for the elements using the earlier baseline

In the example shown below, there is a minor change in the structure of the DOM where the image (i.e. img) is under a different div. Existing baseline (on the left) is updated with the new tags ahead of the Image with id ‘test-image’. From the next run onwards, the snapshot on the right will be used as the baseline by the auto healing algorithm.

Automation test suite impacted with such minor changes will be auto healed by the auto healing algorithm.

Unlike the earlier example, here the DOM structure still remains the same but the ID of img is changed from test-image to test-image1. The said locator will be auto healed during the process of test execution.

In the scenario highlighted in the earlier section, there was no change in the DOM tree (or page layout), except that the ID locator of the email element was changed from email to email-address.

*Locating element using old ID *👇

Here, the element can be located using the ID as email.

Snapshot from Inspect Tools below:

Need to create MD5 hashes quickly? Our MD5 hash calculator create reliable, one-way hashes quickly and keep your information secure. Try it out now!

Locating & Healing element using updated ID 👇
Here, only the ID of the email element is changed to email-address whereas
the layout of the DOM tree remains unchanged. Once the test scenarios are executed, the locator (i.e. ID) will be healed from email-address to email.

The healing is possible, since the snapshot of the earlier test execution is available for AI-powered DOM comparison. Hence, the respective locator will be healed and the execution will result in a pass!

Snapshot from Inspect Tools below:

Both the execution cycles will pass since the locators are healed during the process of test execution! To summarize, auto healing in Selenium automatically recovers the tests from failures encountered due to changes in locators. This results in reduced test flakiness and improved test reliability & stability!

Now, let’s walk the talk with a demonstration of auto healing in Selenium on the LambdaTest cloud grid!

Demonstration: Auto Healing in Selenium

Before we head on to the demonstration of auto healing in Selenium, here is an important caveat that requires attention:

Auto healing can reduce test flakiness, but the overall increase in the test execution time largely depends on the overall layout of the DOM tree.

Now that we have covered the essentials of auto healing in Selenium, let’s get our hands dirty with a few examples. We will be using Selenium Java for the implementation of the test scenarios. Without further ado, let’s get started!

For demonstration, we would initially execute the test scenarios below by setting the autoHeal capability to true. The rest of the capabilities can be set using the LambdaTest Capabilities Generator.

Test Scenarios

Test Scenario — 1

Navigate to the eCommerce Playground Products Page.
Scroll until the product “MacBook Air” is located.
Click the “Buy Now” button.
Assert if the “Check out page” is not shown.

Test Scenario — 2

Navigate to the eCommerce Playground Registration Page.
Enter the required details on the page.
Click the “Continue” button.
Assert if the “User registration is not successful”.

Test Scenario — 3

Navigate to the Development Page.
Click on the “SIGN UP” button.
Enter the required details on the page.
Navigate to the Development Page within iFrame
Switch to the iFrame.
Enter the required registration details and click “Sign Up”.
Assert if the “Signup is not successful”.

We would have two test execution cycles:

Execution with unchanged locators
Execution with locators that have changed during development

The second execution cycle should result in the healing of the locators, i.e., even though the earlier locators (e.g., Name, ID, etc.) on the page are changed, they would still be healed by the auto (or self) healing feature on LambdaTest.

Project Structure

Shown below is the overall directory structure:

The local-project folder consists of the sign-up page, which will be used for localhost testing using the LambdaTest tunnel and Auto Heal feature on LambdaTest. The page is inspired by the Signup Form by Florin Pop; thanks for it. 🙂

The setup package (in src/main/java folder) consists of a single file named DriverManager.java. It contains wrapper functions for instantiating Remote WebDriver, setting up implicit timeouts, and more.

Lastly, the test/java folder consists of test files (OrgTest.java and AutoHealingTest.java) that contain almost the same test methods with a tinge of difference. AutoHealingTest.java contains test methods where some locators are intentionally changed using JavaScript Executor in Selenium WebDriver. This is where auto healing will be done by the auto hеaling feature on LambdaTest. We will dive more deeper in the Implementation section of this blog on auto healing in Selenium.

Looking for a reliable SHA1 hash calculator? Our tool generates secure, one-way hashes that you can trust. Create secure hashes quickly with just a few clicks.

Implementation [POM, Wrapper Functions]

Before we kick start the implementation of auto healing in Selenium, let’s add the required project dependencies in the project POM file.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.example</groupId>
    <artifactId>AutoHealingTest</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>7.6.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-nop</artifactId>
            <version>1.7.28</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.7.0</version>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-chrome-driver</artifactId>
            <version>4.7.0</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.13</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.github.sdrss/reportng -->
        <dependency>
            <groupId>org.uncommons</groupId>
            <artifactId>reportng</artifactId>
            <version>1.1.4</version>
        </dependency>
        <dependency>
            <groupId>com.google.inject</groupId>
            <artifactId>guice</artifactId>
            <version>4.2.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-surefire-plugin</artifactId>
            <version>3.0.0-M5</version>
            <type>maven-plugin</type>
        </dependency>
        <!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.3.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-manager -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-manager</artifactId>
            <version>4.7.0</version>
        </dependency>
    </dependencies>

    <build>
        <defaultGoal>install</defaultGoal>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.7.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>3.0.0-M5</version>
                <configuration>
                    <properties> <property>
                        <name>usedefaultlisteners</name>
                        <value>false</value>
                    </property>
                        <property>
                            <name>listener</name>
                            <value>org.uncommons.reportng.HTMLReporter,
                                org.uncommons.reportng.JUnitXMLReporter
                            </value>
                        </property> </properties>
                    <!-- Trigger file from command-line -->
                    <!--<suiteXmlFiles>
                        <suiteXmlFile>testng_autohealing.xml</suiteXmlFile>
                    </suiteXmlFiles>
                    -->

                    <suiteXmlFiles>
                        <!-- pass testng.xml files as argument from command line -->
                        <suiteXmlFile>${suiteXml}</suiteXmlFile>
                    </suiteXmlFiles>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-report-plugin</artifactId>
                <version>3.0.0-M5</version>
            </plugin>
        </plugins>
    </build>
</project>

With the configuration details all set up, let’s look into the wrapper functions and test methods that we looked into earlier in the blog.

/* Source Code inspiration: Selenium4POC: https://bit.ly/ManagerSelenium */

package setup;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxOptions;
import org.openqa.selenium.remote.RemoteWebDriver;

import java.net.MalformedURLException;
import java.net.URL;
import java.time.Duration;
import java.util.HashMap;

import static java.text.MessageFormat.format;

public class DriverManager
{
    private static final ThreadLocal<WebDriver> driverLocal = new ThreadLocal<> ();
    /* Get UserName and Access Key from https://accounts.lambdatest.com/security */
    /* Use getEnv if env variables are exported using export or set */
    private static final String LT_USERNAME= System.getenv("LT_USERNAME");
    private static final String LT_ACCESS_KEY = System.getenv("LT_ACCESS_KEY");
    private static final String GRID_URL = "@hub.lambdatest.com/wd/hub";
    public static String status = "passed";

    public static void quitDriver() {
        if (null != getDriver()) {
            ((JavascriptExecutor) getDriver()).executeScript("lambda-status=" + status);
            getDriver().quit();
        }
    }

    public static void createDriver(final String browser) {
        if (browser.equalsIgnoreCase("chrome")) {
            setupChromeDriver();
        } else if (browser.equalsIgnoreCase("firefox")) {
            setupFirefoxDriver();
        } else if (browser.equalsIgnoreCase("remote-chrome")) {
            setupRemoteChromeDriver();
        } else {
            System.out.println("Browser driver is not available!");
        }
        setupBrowserTimeouts();
    }

    public static WebDriver getDriver () {
        return driverLocal.get();
    }

    private static void setupChromeDriver () {
        final ChromeOptions options = new ChromeOptions ();
        options.addArguments ("--no-sandbox");
        options.addArguments ("--disable-dev-shm-usage");
        options.addArguments ("--window-size=1050,600");
        options.addArguments("--safebrowsing-disable-download-protection");
        driverLocal.set(new ChromeDriver(options));
    }

    private static void setupFirefoxDriver () {

        final FirefoxOptions options = new FirefoxOptions ();
        options.addArguments ("--no-sandbox");
        options.addArguments ("--disable-dev-shm-usage");
        options.addArguments("--window-size=1050,600");
        driverLocal.set(new FirefoxDriver(options));
    }

    private static void setupRemoteChromeDriver ()
    {
        final ChromeOptions browserOptions = new ChromeOptions();
        final HashMap<String, Object> ltOptions = new HashMap<String, Object>();

        browserOptions.setPlatformName ("Windows 11");
        ltOptions.put ("username", LT_USERNAME);
        ltOptions.put ("accessKey", LT_ACCESS_KEY);
        ltOptions.put ("resolution", "2560x1440");
        ltOptions.put ("build", "[Build] Demo: Auto-healing using Selenium on LambdaTest");
        ltOptions.put ("name", "Demo: Auto-healing using Selenium on LambdaTest");
        ltOptions.put ("project", "[Project] Auto-Healing Functionality");
        ltOptions.put ("plugin", "java-testNG");
        ltOptions.put("ACCEPT_INSECURE_CERTS", false);
        ltOptions.put("ACCEPT_SSL_CERTS", false);
        ltOptions.put("tunnel", true);
        ltOptions.put ("w3c", true);
        ltOptions.put("autoHeal", true);

        browserOptions.setCapability ("LT:Options", ltOptions);

        try
        {
            driverLocal.set(new RemoteWebDriver(
                    new URL(format("https://{0}:{1}{2}", LT_USERNAME, LT_ACCESS_KEY, GRID_URL)),
                        browserOptions));
        }
        catch (final MalformedURLException e)
        {
            throw new Error(e);
        }
    }

    private static void setupBrowserTimeouts () {
        WebDriver driver = driverLocal.get();
        driver.manage ()
              .timeouts ()
              .implicitlyWait (Duration.ofSeconds (30));
    }
}

Code Walkthrough

The source code for this file is inspired by the Selenium4POC repo. To ensure that the WebDriver instance is thread-safe, the ThreadLocal class is used for creating and managing thread-local variables. Also, thread-local variables for WebDriver instances are created since all the test scenarios are executed in parallel on LambdaTest Selenium Grid.

The getDriver() method returns the current thread’s value of this thread-local.

The setupRemoteChromeDriver() method lets you set the options (i.e., browserName, browserVersion, platformName, etc.). Since we are also doing localhost testing, the tunnel option (or capability) is set to true.

The autoHeal option (or capability) is set to true so that tests are auto healed and automatically recover from certain failures encountered during test execution.

Say goodbye to the guesswork, get an accurate count of lines for your code or text with our Line Counter tool. Get accurate lines count today!

Since the test execution is done on the LambdaTest cloud grid, the RemoteWebDriver class in Selenium is used for instantiating respective browsers on the cloud. BrowserOptions, LambdaTest user-name & access-key, and *Grid URL *are also passed as parameters to the instance of the *RemoteWebDriver *class. You can find the LambdaTest credentials from the LambdaTest Accounts Page.

After the driver is set, an implicit wait of 30 seconds is set using the setupBrowserTimeouts() method.

import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Parameters;
import static setup.DriverManager.createDriver;
import static setup.DriverManager.quitDriver;

public class BaseTest
{
    @BeforeClass(alwaysRun = true)
    @Parameters({"browser"})
    public void setupTest (final String browser)
    {
        createDriver(browser);
    }

    @AfterClass(alwaysRun = true)
    public void tearDown ()
    {
        quitDriver ();
    }
}

Code Walkthrough

setupTest() is a parameterized method that takes browser as the input parameter, which is in-turn passed from the TestNG xml file (i.e. xml/testng_autohealing.xml or xml/testng_org.xml). The other parameter (i.e., testurl) is used directly inside the parameterized test method(s).

The alwaysRun attribute used along with the @BeforeClass annotation indicates that the annotated method [i.e., setupTest()] must be executed even if test methods inside the class fail or throw exceptions.

On successful execution, you should have the Chrome browser instantiated on the LambdaTest cloud grid.

On similar lines, the tearDown() method implemented under the @AfterClass annotation is invoked once all the test methods in a test class have run. You can refer to the TestNG Annotations tutorial for a quick refresher about these annotations!

Want to decode a messy URL? Unleash the full potential of your website with our online URL Parse tool. Optimize your website’s URLs to improve your site’s visibility,

Implementation [Test Methods]

For simplification, we have separated the test methods into two files (located in the *test/java *folder):

OrgTest.java: Contains implementation with the original locators in place. Hence, you would observe no auto healing when executing tests in the file.
AutoHealingTest.java: Contains implementation with the new locators in place. Hence, you would observe the locators being auto-healed when executing test methods in the file.

Since the blog focuses more on auto healing in Selenium, we won’t be delving deeper into Selenium locator-specific implementation. Let’s get started…

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;
import org.openqa.selenium.interactions.Actions;

import java.time.Duration;
import static setup.DriverManager.getDriver;
import static setup.DriverManager.status;

public class OrgTest extends BaseTest {
    //WebDriver driver = null;
    private WebDriverWait webDriverWait;
    private Actions actionChains;
    JavascriptExecutor jsExecutor;
    int ELEM_TIMEOUT_DUR = 10;

    @BeforeClass
    @Parameters({"testurl"})
    public void navigateToWebsite(final String testURL) throws InterruptedException
    {
        WebDriver driver = getDriver();

        webDriverWait = new WebDriverWait(driver,
                Duration.ofSeconds(ELEM_TIMEOUT_DUR));
        jsExecutor = (JavascriptExecutor) driver;
        actionChains = new Actions(driver);
        driver.get(testURL);

        driver.manage().window().maximize();
        /* Recommend using explicit wait */
        /* Blocking wait used only for testing */
        Thread.sleep(2000);
    }

    @Test(description = "Test 1: Auto Healing on LambdaTest - Ecommerce Registration Page",
            enabled=true)
    public void testAutoHealing_ecommerce_cart() throws InterruptedException
    {
        WebDriver driver = getDriver();
        try
        {
            /* Avoid scrolling, directly scroll into the view */
            /*
            long start_height = (long) jsExecutor.executeScript("return document.documentElement.scrollHeight;");
            jsExecutor.executeScript("window.scrollTo(0, " + start_height + ")");
            Thread.sleep(1000);
             */

            /* New locator works, healed logic is not working fine. This needs to be commented later */
            WebElement elemMacBook = driver.findElement(By.id(
                    "mz-product-grid-image-44-212408"));

            Thread.sleep(1000);

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", elemMacBook);
            Thread.sleep(500);

            actionChains.moveToElement(elemMacBook).perform();

            try
            {
                Thread.sleep(2000);
            } catch (InterruptedException e)
            {
                e.printStackTrace();
            }

            WebElement elemQuickView = driver.findElement(By.xpath(
                    "//button[@class='btn btn-quick-view quick-view-44']"));
            webDriverWait.until(ExpectedConditions.elementToBeClickable(elemQuickView));

            Thread.sleep(1000);
            elemQuickView.click();

            WebElement elemBuyNowButton;
            elemBuyNowButton = driver.findElement(By.id(
                    "entry_212965"));
            webDriverWait.until(ExpectedConditions.elementToBeClickable(elemBuyNowButton));

            Thread.sleep(2000);

            elemBuyNowButton = driver.findElement(By.id("entry_212965"));
            elemBuyNowButton.click();

            WebElement elemContinueButton = driver.findElement(By.cssSelector(
                    "#button-save"));
            webDriverWait.until(ExpectedConditions.elementToBeClickable(elemContinueButton));

            /* We can do some checks later, raise assert if failure */
            String curURL = driver.getCurrentUrl();
            boolean statusURL = curURL.contains("checkout");
            Assert.assertTrue(statusURL,
                    "Checkout page is displayed");
        }
        catch (Exception e)
        {
            System.out.println(e.getMessage());
            status = "failed";
        }
        Thread.sleep(2000);
    }

    @Test(description = "Test 2: Auto-Healing on E-Commerce Playground Registration Page",
          enabled=true)
    public void testAutoHealing_ecomm_registration() throws InterruptedException
    {
        WebDriver driver = getDriver();

        try
        {
            WebElement elemFirstName = driver.findElement(By.id("input-firstname"));
            elemFirstName.sendKeys("Testing");

            WebElement elemLastName = driver.findElement(By.id("input-lastname"));
            elemLastName.sendKeys("Testing12345");

            By newEmailAddr = By.id("input-email");
            WebElement tempElement = driver.findElement(newEmailAddr);
            tempElement.sendKeys("testingemail4@gmail.com");

            /* Not a good practice, should be avoided. Used only for testing */
            Thread.sleep(1000);

            /* If auto-healing is applied, below mail will be entered in the said location */
            WebElement elemEmail = driver.findElement(By.id("input-email"));
            elemEmail.clear();
            Thread.sleep(1000);
            elemEmail.sendKeys("testingemail5@gmail.com");

            Thread.sleep(1000);

            WebElement elemTel = driver.findElement(By.xpath("//input[@id='input-telephone']"));
            elemTel.sendKeys("12345678");


            WebElement elemPass = driver.findElement(By.name("password"));
            elemPass.sendKeys("password");

            WebElement elemPassConf = driver.findElement(By.name("confirm"));
            elemPassConf.sendKeys("password");

            By newNewsletter = By.id("input-newsletter-yes");
            WebElement tempElementNewsletter = driver.findElement(newNewsletter);
            jsExecutor.executeScript("arguments[0].checked = true;",
                    tempElementNewsletter);

            Thread.sleep(3000);

            WebElement elemNewsletter = driver.findElement(By.id("input-newsletter-yes"));
            jsExecutor.executeScript("arguments[0].checked = false;", elemNewsletter);

            WebElement elemNewsletterNo = driver.findElement(By.id("input-newsletter-no"));
            jsExecutor.executeScript("arguments[0].checked = true;", elemNewsletterNo);

            WebElement elemAgree = driver.findElement(By.cssSelector("[for='input-agree']"));
            elemAgree.click();

            Thread.sleep(2000);

            WebElement elemSubmit = driver.findElement
                        (By.xpath("//input[@class='btn btn-primary']"));
            elemSubmit.click();

            webDriverWait.until(d -> ((JavascriptExecutor) driver).
                    executeScript("return document.readyState").toString().equals
                    ("complete"));

            String curURL = driver.getCurrentUrl();
            boolean statusURL = curURL.contains("contains");
            Assert.assertFalse(statusURL,
                    "Success URL is not displayed");
        }
        catch (Exception e)
        {
            System.out.println(e.getMessage());
            status = "failed";
        }
        Thread.sleep(2000);
    }

    @Test(description = "Test 3: [Local Page] Auto Healing on LambdaTest", enabled=true)
    public void testAutoHealing_local_page() throws InterruptedException
    {
        WebDriver driver = getDriver();

        try
        {
            WebElement elemSignUp = driver.findElement(By.id("signUp"));
            elemSignUp.click();

            WebElement elemFirstName = driver.findElement(By.name("first-name"));
            webDriverWait.until(ExpectedConditions.visibilityOf(elemFirstName));

            /* Clear the existing text and enter the details */
            elemFirstName.clear();
            elemFirstName.sendKeys("Himanshu Blogger");

            Thread.sleep(2000);

            /* Scenario 2: The iFrame contains the page where the ID's are changed */
            driver.get("http://localhost:8080/iframe.html");

            webDriverWait.until(d -> ((JavascriptExecutor) driver).
                    executeScript("return document.readyState").toString().equals
                            ("complete"));

            driver.switchTo().frame("iframe_1");
            Thread.sleep(2000);

            /* Healing 3 : ID of the button was changed earlier */
            WebElement elemSignUpButton = driver.findElement(By.id("signUp"));
            elemSignUpButton.click();

            /* Healing 4 : Name of the button was changed in the base HTML file */
            WebElement elemModFirstName = driver.findElement(By.name("first-name"));
            elemModFirstName.sendKeys("Himanshu Sheth");

            WebElement elemEmail = driver.findElement(By.name("email"));
            elemEmail.sendKeys("himanshu.blogger@gmail.com");
            Thread.sleep(500);

            WebElement elemNewPwd = driver.findElement(By.className("password"));
            elemNewPwd.sendKeys("Password");
            Thread.sleep(500);

            /* Click Sign-up button */
            elemSignUpButton = driver.findElement(By.cssSelector(".sign-up-container button"));
            elemSignUpButton.click();

            Thread.sleep(3000);

            String curURL = driver.getPageSource();
            boolean statusURL = curURL.contains("SignUp iFrame");
            Assert.assertFalse(statusURL,
                    "Sign Up was not successful");
        }
        catch (Exception e)
        {
            System.out.println(e.getMessage());
            status = "failed";
        }
        Thread.sleep(2000);
    }
}

Code Walkthrough

The OrgTest class extends BaseTest that contains utility functions for creating WebDriver instance and destroying the same via the *quit() *method in Selenium.

To start with, we create a reference to the JavascriptExecutor interface. This will be further used for executing JavaScript within Selenium script. Further, an object of the Actions class is created so that we can automate actions like mouse clicks, button clicks, and more.

Here, we will look into the important aspects of the test methods.

Test Method (Test Scenario — 1): testAutoHealing_ecommerce_cart

After navigating to the eCommerce Playground Product Page, the desired product (i.e., MacBook Air) is located using the ID locator in Selenium.

Once the element is identified (or located), we use the JS method scrollIntoView() to scroll into the visible area of the located element. scrollIntoView() is invoked using executeScript() method of the JavascriptExecutor interface.

Once into the view, locate the Quick View button using the XPath locator. We use the elementToBeClickable ExpectedCondition in Selenium to wait until the element is not clickable. Once clickable, the element is clicked by invoking the Click method.

The Buy Now button is located using the ID locator, and a click is performed to navigate to the next page.

Unescape your JSON strings with just a few clicks using our easy-to-use online JSON Unescape tool. Get accurate results in no time. Try it out now.

Finally, locate the Continue button (i.e., ID = button-save) on the page using the ID locator. An assert is raised in case the URL does not contain checkout.

Test Method (Test Scenario — 2): testAutoHealing_ecomm_registration

After navigating the eCommerce Playground Registration page, the respective elements are located using ID, XPath, and other locators. As shown below, the first name element is located using the ID locator, and sendKeys in Selenium is used for entering details in the text box.

Subscription to newsletter is marked as NO by locating the respective Radio button. Since there are multiple elements of input-newsletter-no in the DOM, arguments[0].checked is used for toggling the state of the first argument (i.e., reference to the Radio button).

Now that all the required entries are filled, the Submit button is clicked. The Document.readyState property is checked for completion (i.e., complete), after which a check is performed to verify if the required page has opened.

Test Method (Test Scenario — 3): testAutoHealing_local_page

This test is performed on a document (or page) under development. Once you have downloaded its source code, navigate to the dist folder and trigger php -S localhost:8080 command on the terminal.

Navigate to localhost:8080 from the web browser.

**JSON Validator is a free and easy-to-use tool to validate JSON data, which makes it easier to fix the issue by providing error line and character position.**

Since this is the case of localhost testing, we need to start the tunnel. To do the same, download Underpass from LambdaTest to establish an SSH tunnel between the OS & LambdaTest cloud server(s).

With this, we are all geared to test the local pages on LambdaTest! First, the SIGN UP button on the page is located using the ID locator. Once located, the button is clicked using the Click() method.

Required details like First Name, Email, and Password are entered using the same approach we have discussed. As a part of the next test, we navigate to http://localhost:8080/iframe.html, where the iFrame is a container of the earlier page (i.e., index.html). The intent of creating this page is to verify if auto healing of locators is possible within iFrames.

To get started, we first switch to the iFrame by invoking the switchTo() method of Selenium WebDriver. If you are new to iFrames, check the tutorial on handling iFrames with Selenium.

Once we switch to the iFrame, the combination of findElement() and sendKeys() methods is used for automating interactions with the elements in the DOM.

With this, we are all set to execute the tests on the LambdaTest platform! It is essential to note that we have set the autoHeal capability to true.

Execution [No Auto Healing]

First, export the environment variables LT_USERNAME and LT_ACCESS_KEY by adding them in the Makefile.

With this, we are all set to trigger the tests via the Makefile. Run make clean to clean any output/target directories.

Run make set-env to export the desired environment variables (i.e., LT_USERNAME and LT_ACCESS_KEY).

For simplification, we have two separate TestNG XML (i.e., testng_org.xml & testng_autohealing.xml) files to demonstrate auto healing in Selenium.

Run make org-test to execute tests with locators that have not been modified during development. Hence, we will not observe any auto healing of locators in this test execution cycle.

As seen below, the test execution is triggered with all three tests running in parallel on LambdaTest Selenium Grid.

Log on to the LambdaTest Automation Dashboard to check the status of the test execution.

As seen below, the test execution was successful, and no auto healing was done since there was no change in the locators.

Things are getting exciting.🙂Now, let’s change a few locators using the executeScript() method in Selenium that helps execute JavaScript in the context of the currently selected frame (or window). Let’s set the ball rolling!

HTML Validator is an online tool that checks HTML syntax and quality. Improve your website’s performance and functionality with ease.

Implementation Changes [for Auto Healing demonstration]

As mentioned earlier in the above sections, we have kept the auto-healing tests in a separate file so that it becomes easy to differentiate between them! Here are the important code touch-points:

Let’s change locators in the first test scenario by replacing the ID entry_212965 to buy_later on the eCommerce Playground Product Page.

For demonstration, we execute the command on the DevTools console. As seen below, the ID of the said element is changed to buy_later.

To mimic the same change via code, we first locate the element using the ID locator. Once the element is located, its ID is changed using the getElementById() method of the Document interface.

Now, here comes the magic of the auto healing logic. 🤔Instead of using the new locator (i.e. buy_later), we still use the old locator (i.e. entry_212965) in the test implementation.

As the AutoHeal capability on LambdaTest is set to true, the respective locator will be auto healing by the auto healing algorithm. In a nutshell, test execution will still be successful!

Let’s change locators in the second test scenario by modifying the NAME locator from password to password-new on the eCommerce Playground Registration Page.

As seen below, there is one element with the Name locator as a password.

For demonstrating auto healing in Selenium, we manually changed the Name locator for the said element from password to password-new.

Now that we know that the locator change is working, we use the getElementsByName() method of the Document interface. Since the method returns an array, we change the Name locator of the first element of the array.

Even though the value of the locator has changed, the earlier locator value (i.e., password) is used for locating the said element. This is where the locator will be auto healed by the algorithm, and test execution still results in a success.

The same experiments are repeated in the third test scenario where the ID of the Sign Up button is changed from signUp to signUp-Button. Also, the earlier ID(i.e. signUp) is used to locate the button using its ID locator.

Execution [With Auto Healing]

The test code with modified locators is present in AutoHealingTest.java. Run the command make auto-heal to execute the tests that have locators healed by the auto healing algorithm.

As seen below, the test execution was successful. However, a small bandage icon (for indicating healed tests) is next to the respective tests. One more noticeable change is the increase in the test execution time which can be largely attributed to the locators being healed by the algorithm!

In order to check the details of the healed locator, navigate to the respective test in the dashboard and click on the Bandage icon. You should be able to view details of the locator used for healing the test.

In a nutshell, auto healing should be used with caution, as there could be performance impact; the gravity of which largely depends on DOM size. Hence, it is recommended to patch the test code with the healed locator (on a case-to-case basis) to further reduce flakiness and increase stability of the tests!

Don’t waste time debugging your YAML files. Use our free YAML validator tool to validate your YAML code quickly and identify syntax errors and fix them.

Limitations of Auto Healing Code

Now that we have looked at the major upsides of auto (or self) healing, the integral question is: Can auto healing address all issues related to flakiness? Though auto healing on LambdaTest is designed to handle a wide range of issues, there are some limitations!

Or should we say that the learnings of auto healed tests must be utilized in making the tests less flaky (i.e., more stable & reliable). Without further ado, here are some of the limitations of the auto healing functionality:

Non-recoverable Errors

Auto healing cannot recover from certain failure types (e.g., WebDriver initialization errors, system-level failures, etc.)

Test Accuracy

Though auto healing does an excellent job of reducing test flakiness, there is a possibility that it might be masking underlying issues in the test scripts.

As mentioned earlier, it is imperative to review the logs, find the root cause of failure, and fix the test script (depending on the cause of flakiness).

Performance Impact

As seen throughout test execution, auto healing can have a slight impact on test execution time.

This impact can be largely attributed to the additional checks and recovery mechanisms used to recover the tests from potential failures!

Apart from this, false positives and false negatives are some of the other limitations of auto healing tests. Hence, a lot depends on the algorithm built for detecting the cause of failure and healing the cause with the healed locator!

It’s Time to Heal!

In general, auto healing functionality is built to improve the robustness and reliability of the tests. This, in turn, aids in reducing the flakiness factor in the tests!

Having said that, it just temporarily heals the wound, which in our case is the test (or test suite). The learnings of auto healed tests must be used for a near-permanent removal of flakiness aspects of the tests. At the end of it, auto healed tests cannot replace good test design or error-handling principles.

Think of auto healing as a remedy that needs a permanent fix such that healing is no longer necessary…
__

Generating XML And HTML Report In PyUnit For Test Automation

himanshuseth004 — Mon, 06 Nov 2023 14:29:17 +0000

Irrespective of the test framework being used, one aspect that would be of interest to the various stakeholders in the project e.g. developers, testers, project managers, etc. would be the output of the test results. Keeping a track of the progression of test suites/test cases and their corresponding results can be a daunting task. The task can become more complex in the later stages of the project since the product would have undergone various levels of testing.

Automation Reports is an ideal way through which you can track progress, improve the readability of the test output thereby minimizing the amount of time required in the maintenance of the test data (& results). We have already covered importance & advantages of test reports refer to our blog on report generation in pytest.

In this article, I will be talking about generating HTML reports in PyUnit (also known as unittest), a popular test Python testing framework that is widely used to execute unit testing of a Selenium Python test suite.

If you’re new to Selenium and wondering what it is then we recommend checking out our guide — What is Selenium?

Looking for an easy way to convert Gray code to Decimal? Try our free online Gray to Decimal Converter tool to convert Gray code to Decimal in just a few seconds!

PyUnit HTML Report Generation Using HTMLTestRunner

To generate PyUnit HTML reports that have in-depth information about the tests in the HTML format, execution results, etc.; you can make use of HtmlTestRunner module in Python.

There are different ways in which reports can be generated in the HTML format; however, HtmlTestRunner is widely used by the developer community. To install HtmlTestRunner module, you need to execute the following command in your terminal:

pip install html-testRunner

The entire purpose of HtmlTest runner is to save the output of your automation test execution in html file to make it much easier to interpret.

Below is a snapshot of the HtmlTestRunner module installation.

We make use of the Eclipse IDE for development purpose and the same can be downloaded from here. You also have the option of using the Community version of the PyCharm IDE which can be downloaded from here

Now that you have installed HtmlTestRunner, let’s have a look at the test suite used for generating PyUnit HTML reports. The testsuite contains two test cases.

a. Google Search where the search term is ‘LambdaTest’.

b. Wikipedia Search where the search term is ‘Steve Jobs’.

Test Case A — Google Search where the search term is ‘LambdaTest’

The filename is GoogleTest.py and the compiled Python file (GoogleTest) would be imported in the file where the TestSuite is created. For more information on the setUp() and tearDown() methods, please have a look at the earlier articles that have covered PyUnit/unittest in more detail.

Filename — GoogleTest.py (Compiled Python File — GoogleTest)

import unittest
from selenium import webdriver
import time
from time import sleep

class GoogleSeachTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Firefox()

    def test_GoogleSearch(self):
        driver_firefox = self.driver
        driver_firefox.maximize_window()
        driver_firefox.get('http://www.google.com')

        # Perform search operation
        elem = driver_firefox.find_element_by_name("q")
        elem.send_keys("Lambdatest")
        elem.submit()

        sleep(10)

    def tearDown(self):
        # Close the browser.
        self.driver.close()

if __name__ == '__main__':
    unittest.main()

Test Case B — Wikipedia Search where the search term is ‘Steve Jobs’

The filename is WikiTest.py and the compiled Python file (WikiTest) would be imported in the file where the TestSuite is created.

Filename — WikiTest.py (Compiled Python File — WikiTest)

import unittest
from selenium import webdriver
import time
from time import sleep

class WikipediaSeachTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Firefox()

    def test_WikipediaSearch(self):
        driver_firefox = self.driver
        driver_firefox.maximize_window()


        # Perform search operation
        driver_firefox.get('http://en.wikipedia.org')

        driver_firefox.find_element_by_id('searchInput').clear()
        driver_firefox.find_element_by_id('searchInput').send_keys('Steve Jobs')

        sleep(10)
        driver_firefox.find_element_by_id('searchButton').click()

        sleep(10)

    def tearDown(self):
        # Close the browser.
        self.driver.close()

if __name__ == '__main__':
    unittest.main()

Compiling Test Case A & B For Generating PyUnit HTML Reports

For compiling the files, you can make use of the command:

python GoogleTest.py
python WikiTest.py

We make use of the compiled Python code (GoogleTest and WikiTest) to create a testsuite that has these two test cases. We make use of the HtmlTestRunner module to create PyUnit HTML report that contains details about the tests along with the execution results.

Filename — test_html_runner_search.py

import unittest
import GoogleTest
import WikiTest
import os

# Import the HTMLTestRunner Module
import HtmlTestRunner

# Get the Present Working Directory since that is the place where the report
# would be stored

current_directory = os.getcwd()

class HTML_TestRunner_TestSuite(unittest.TestCase):
    def test_GoogleWiki_Search(self):

        # Create a TestSuite comprising the two test cases
        consolidated_test = unittest.TestSuite()

        # Add the test cases to the Test Suite
        consolidated_test.addTests([
            unittest.defaultTestLoader.loadTestsFromTestCase(GoogleTest.GoogleSeachTest),
            unittest.defaultTestLoader.loadTestsFromTestCase(WikiTest.WikipediaSeachTest)
        ])

        output_file = open(current_directory + "\HTML_Test_Runner_ReportTest.html", "w")

        html_runner = HtmlTestRunner.HTMLTestRunner(
            stream=output_file,
            report_title='HTML Reporting using PyUnit',
            descriptions='HTML Reporting using PyUnit & HTMLTestRunner'
        )

        html_runner.run(consolidated_test)

if __name__ == '__main__':
    unittest.main()

As seen in the implementation above, we make use of the HTMLTestRunner method which is implemented in the HtmlTestRunner module (HtmlTestRunner.HTMLTestRunner). For the purpose of testing, we have passed three arguments to the HTMLTestRunner method:

Need to decode Base64 strings but don’t know how? Our Base64 decode tool is the easiest way to decode Base64 strings. Simply paste your code and get decoded text in seconds.

For more details about the HTMLTestRunner method, you can refer to runner.py that can be found in the location where HtmlTestRunner module is installed (< Installation Path >\…\venv\Lib\site-packages\runner.py).

class HTMLTestRunner(TextTestRunner):
    """" A test runner class that output the results. """

    time_format = "%Y-%m-%d_%H-%M-%S"

    def __init__(self, output="./reports/", verbosity=2, stream=sys.stderr,
                 descriptions=True, failfast=False, buffer=False,
                 report_title=None, report_name=None, template=None, resultclass=None,
                 add_timestamp=True, open_in_browser=False,
                 combine_reports=False, template_args=None):
        self.verbosity = verbosity
        self.output = output
        self.encoding = UTF8

        TextTestRunner.__init__(self, stream, descriptions, verbosity,
                                failfast=failfast, buffer=buffer)

Below is the execution snapshot of test_html_runner_search.py

The report location & report name is passed as an argument to the HTMLTestRunner() method. Below is the content for the PyUnit HTML report (HTML_Test_Runner_ReportTest.html). The report contains information about the two tests that were executed as a part of the testsuite, their execution results and time taken for completion.

Running tests... ----------------------------------------------------------------------
test_GoogleSearch (GoogleTest.GoogleSeachTest) ... OK (18.393839)s
test_WikipediaSearch (WikiTest.WikipediaSeachTest) ... OK (32.298229)s
Ran 2 tests in 0:00:50 OK Generating HTML reports... reports\TestResults_GoogleTest.GoogleSeachTest_2019-05-31_17-48-20.html reports\TestResults_WikiTest.WikipediaSeachTest_2019-05-31_17-48-20.html

Apart from the consolidated report shown above, there would be individual reports that would be located in the < output-folder >\reports\ folder

TestResults_GoogleTest.GoogleSeachTest_2019–05–31_xxxx.html

TestResults_WikiTest.WikipediaSeachTest_2019–05–31_xxxx.html

PyUnit XML Report Generation Using XMLTestRunner

Apart from html-testrunner, you can also make use of xmlrunner in case you want to generate a PyUnit XML report. In order to use xmlrunner, you need to install the module using the following command.

pip install xmlrunner

Once the module is installed, you need to perform minimal changes in the HTML report-based implementation. We will be using the similar test cases as we used for PyUnit HTML reports, the code snippet is below:

import unittest
import GoogleTest
import WikiTest
import os

# Import the xmlrunner Module
import xmlrunner

# Get the Present Working Directory since that is the place where the report
# would be stored

current_directory = os.getcwd()

        ……………………………………


        ……………………………………
        output_file = open(current_directory + "\XML_Test_Runner_ReportTest", "w")

        testRunner = xmlrunner.XMLTestRunner(output=output_file)
        testRunner.run(consolidated_test)


        ……………………………………


        ……………………………………
if __name__ == '__main__':
    unittest.main()

Scope Of PyUnit HTML Reports/ XML Reports For Automated Cross Browser Testing

Now that we know how to generate a PyUnit HTML report, or PyUnit XML report, we need to understand the scope of implementation based on the automated cross browser testing needs of your project. How practical is this approach and is it going to hamper your productivity as you perform Selenium? Let’s find out.

Not So Scalable Approach

HtmlTestRunner in conjunction with Selenium & PyUnit (unittest) can be used to a good extent to test the features of a web product. However, the approach may not be scalable if the testing is performed on a project/product at a large scale.

*Check out the Text to HTML Entities Converter allows it to save and share HTML Entities and convert Text to HTML Entities Numbers, which display reserved letters in HTML. *

Maintenance Is Going To Be A Hassle

Maintenance of the test reports would be a strenuous task and its complexity will multiply with the growing scale of the project.

What If You Are Using An Automated Cross Browser Testing Cloud For Selenium Script Execution?

With the increasing number of web browsers, operating systems, devices; performing testing on these different combinations has become essential to ensure premium end-user experience. You can improve your existing infrastructure to perform automated cross browser testing but the approach may neither be scalable, not economical. So a good idea would be to empower yourself with automated cross browser testing on cloud. You can increase the throughput from your test team by making use of parallel test execution in Selenium on a cloud-based testing infrastructure.

LambdaTest is a browser compatibility testing tool on cloud that supports 2,000+ real browsers & browser versions for both mobile, and desktop. LambdaTest offers a Selenium Grid with zero-downtime, so you don’t have to worry about maintenance. All you would need is a LambdaTest account, internet connectivity, and your desired capabilities to invoke a test automation script on Selenium Grid offered by LambdaTest. You would also get the benefits of LambdaTest integrations to third party tools for CI/CD, project management, codeless automation and more.

Automation testing with Selenium Grid offered by LambdaTest also allows you to extract your test reports from our cloud servers to your preferred storage, without logging into LambdaTest.

Meaning, you can execute your tests are written using PyUnit & Selenium with reports generated using popular modules like HtmlTestRunner or xmlrunner on our Selenium Grid.

Sharing & maintaining test reports becomes easy with LambdaTest Selenium API, and you also get the convenience to perform browser compatibility testing on your locally hosted web pages, at scale.

Run The Existing Test Suite On LambdaTest Selenium Grid

The first task is to port the existing implementation (WikiTest.py and GoogleTest.py) to LambdaTest Selenium Grid. The only change that is done in the implementation is porting from local webdriver to remote webdriver; the capabilities are generated using the Lambdatest Capability Generator. Shown below is the code ported to LambdaTest Selenium Grid.

Filename — WikiTest.py (Ported to Lambdatest Grid, Compiled Python File — WikiTest)

import unittest
from selenium import webdriver
import time
from time import sleep
import warnings
import urllib3

#Set capabilities for testing on Firefox
ff_caps = {
    "build" : "Testing reporting on Lambdatest using PyUnit (Wikipedia-1)",
    "name" : "Testing reporting on Lambdatest using PyUnit (Wikipedia-1)",
    "platform" : "Windows 10",
    "browserName" : "Firefox",
    "version" : "64.0",
}

# Obtain details from https://accounts.lambdatest.com/profile
user_name = "your-user-name"
app_key = "app-key-generated-during-account-creation"

class WikipediaSeachTest(unittest.TestCase):
    def setUp(self):
        global remote_url

        urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
        remote_url = "https://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub"

    def test_GoogleSearch(self):
        driver_firefox = webdriver.Remote(command_executor=remote_url, desired_capabilities=ff_caps)
        self.driver = driver_firefox
        driver_firefox.maximize_window()

        # Perform search operation
        driver_firefox.get('http://en.wikipedia.org')

        driver_firefox.find_element_by_id('searchInput').clear()
        driver_firefox.find_element_by_id('searchInput').send_keys('Steve Jobs')
        driver_firefox.find_element_by_id('searchButton').click()

    def tearDown(self):
        # Close the browser.
        self.driver.close()
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Filename — GoogleTest.py (Ported to Lambdatest Grid, Compiled Python File — GoogleTest)

import unittest
from selenium import webdriver
import time
from time import sleep
import warnings
import urllib3

#Set capabilities for testing on Firefox
ff_caps = {
    "build" : "Testing reporting on Lambdatest using PyUnit (Google)",
    "name" : "Testing reporting on Lambdatest using PyUnit (Google)",
    "platform" : "Windows 10",
    "browserName" : "Firefox",
    "version" : "64.0",
}

# Obtain details from https://accounts.lambdatest.com/profile
user_name = "your-user-name"
app_key = "app-key-generated-during-account-creation"

class GoogleSeachTest(unittest.TestCase):
    def setUp(self):
        global remote_url

        urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
        remote_url = "https://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub"

    def test_GoogleSearch(self):
        driver_firefox = webdriver.Remote(command_executor=remote_url, desired_capabilities=ff_caps)
        self.driver = driver_firefox
        driver_firefox.maximize_window()
        driver_firefox.get('http://www.google.com')

        # Perform search operation
        elem = driver_firefox.find_element_by_name("q")
        elem.send_keys("Lambdatest")
        elem.submit()

    def tearDown(self):
        # Close the browser.
        self.driver.close()
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

The implementation of test_html_runner_search.py remains the same since it only contains the testsuite for execution (i.e. it is only a placeholder). Below is the screenshot of the Execution Status of these tests on the LambdaTest cloud.

**Binary to Gray Code Converter is a free, easy-to-use online tool that converts a binary number into its equivalent Gray code representation in just one click.**

Using LambdaTest Selenium API For Extracting PyUnit Test Reports

LambdaTest has provided APIs through which developers & testers can manage test builds, track test status, fetch logs for tests performed over a period of time, modify build related information, etc. The output of the API is in JSON (JavaScript Object Notation) format, it contains detailed information about the test environment (browser, operating system, device, etc.) along with the execution results.

In order to make use of the LambdaTest APIs, you need to login to https://www.lambdatest.com/support/docs/api-doc/ using your user-name and access-token. You can get user-name & access-token by visiting your profile section.

You should authorize the LambdaTest API using these credentials in order to trigger GET, POST requests using the APIs. The test automation timeline will have history of the tests that you have performed so far.

Every test execution will be associated with a unique testID, buildid, and sessionId. The URL for test execution has the format https://automation.lambdatest.com/logs/?testID={test-id}&build={build-id}.

The sessionId details can be found by visiting the Command tab for that particular testID & buildID, sample is shown below:

LambdaTest Build & Session API Demonstration

API that can be used for detailed reporting:

https://api.lambdatest.com/automation/api/v1/

You need to append the necessary end-point to the end of the API and issue a GET/POST to get the results.

Endpoints can be builds, sessions, tunnels, platforms.

For example, you can make use of /tunnels i.e.

https://api.lambdatest.com/automation/api/v1/tunnels

to fetch the running tunnels used for testing locally hosted web pages through your account.

When you initiate a test request, a session-id is assigned to that test session. Using LambdaTest Selenium API, you can get detailed information at the test session level using the

https://api.lambdatest.com/automation/api/v1/sessions

**Binary to Octal Converter is a free, easy-to-use online tool that converts binary number to octal format. Enter a binary number and convert it to an octal number.**

Extracting Build Details Using LambdaTest Selenium API

For demonstration, we extract details of the tests that have status — completed, error, and timeout and we limit the search for first 20 tests. To get started, you need to authorize those APIs to fetch build, session, tunnel & other related information from your account. Login to https://www.lambdatest.com/support/docs/api-doc/ with your user-name & session-key.

Since you require information about the builds that match the execution state (completed, error, timeout), you have to fill those requirements in the Builds section in https://www.lambdatest.com/support/docs/api-doc/#/Build/builds Below is the screenshot of the command in execution. You also get the CURL API which can be used in your code for fetching the same information programmatically.

The response code can be 200 (OK), 400 (Session Invalid), and 401 (Authentication Failed). Since we are using Python, we convert the CURL response into Python code using the converter located in https://curl.trillworks.com/. You can use other tools or websites that can offer similar functionality (for free), for our demonstration we are making use of the above-mentioned website.

We extract details of the first 20 builds that matches status-completed, timeout, error. Once we have extracted the details, we update the build headline for the buildID = 12024. We make use of:

https://api.lambdatest.com/automation/api/v1/builds/{Build_ID}

In our example, the build ID would be 12024. Below is the code which demonstrates the LambdaTest API integration:

# Requirements

# Fetch first 20 builds which have status as completed, error, timeout
# Once the details are out, change the Build Title of the build_id 12024

# Refer https://www.lambdatest.com/support/docs/api-doc/#/Build/builds for more information
import requests
import json

# Equivalent Python code from https://curl.trillworks.com/
headers = {
    'accept': 'application/json',
    'Authorization': 'Basic aGltYW5zaHUuc2hldGhAZ21haWGI0T2x1OVI4bHdCc1hXVFNhSU9lYlhuNHg5',
}

params = (
    ('limit', '20'),
    ('status', 'completed,error,timeout'),
)

# Updated build information for build 12024
headers_updated_build = {
    'accept': 'application/json',
    'Authorization': 'Basic aGltYW5zaHUuc2hldGhAZ21haWGI0T2x1OVI4bHdCc1hXVFNhSU9lYlhuNHg5',
    'Content-Type': 'application/json',
}

data_updated_build = '{"name":"Updated build details for PyUnit test from prompt"}'

response = requests.get('https://api.lambdatest.com/automation/api/v1/builds', headers=headers, params=params)

print(response)

json_arr = response.json()

# Print the build_id matching our requirements and Change build title of build_id 12024

for loop_var in range(20):
    build_id = ((json_arr['data'][loop_var])['build_id'])
    test_status = ((json_arr['data'][loop_var])['status_ind'])

    if build_id == 12024:
        response_updated_build = requests.patch('https://api.lambdatest.com/automation/api/v1/builds/12024', headers=headers_updated_build, data=data_updated_build)
        print(response_updated_build)

    print ((build_id), (test_status))

As seen in the screenshot, the Build headline for BuildID = 12024 is updated.

We execute the code using the normal Python command, the response of the execution is 200 (OK).

Extracting Tunnel Information Of Locally Hosted Web Pages

One of the primary advantages of moving the web testing and automated cross browser testing to LambdaTest Selenium Grid is the flexibility to test locally hosted & privately hosted pages using the LambdaTest Tunnel. LambdaTest Tunnel establishes an SSH(Secure Shell) connection between your local machine & LambdaTest cloud servers. To configure the LambdaTest Tunnel for different operating systems, please visit

In order to make use of the Tunnel APIs, you need to visit: https://www.lambdatest.com/support/docs/api-doc/#/tunnel/get_tunnels

The Tunnel API does not accept any parameters and successful execution fetches details about the different tunnels running in your account. In the implementation shown below, we can see that there were two tunnels that were in use by the user and once the tunnel usage was complete, the tunnel instance was removed & the session was closed.

import requests
import json

headers = {
    'accept': 'application/json',
    'Authorization': 'Basic aGltYW5zaHUuc2hldGhAZ21haWwuY2lYlhuNHg5',
}

response = requests.get('https://api.lambdatest.com/automation/api/v1/tunnels', headers=headers)

print(response)
json_arr = response.json()
print(json_arr)

You can also stop an already running tunnel instance using the corresponding LambdaTest API

https://api.lambdatest.com/automation/api/v1/tunnels/{tunnel-ID}

For a complete list of operations that can be performed on Builds, Sessions, Tunnels, and Platforms; please visit the LambdaTest API Page.

Convert octal to decimal quickly and easily with our free online converter tool. Try it now for free!

Conclusion

Testing is an integral part of any product/project and its effectiveness can be enhanced by making use of powerful reporting tools. Reports are used to keep track of the testing activities (results, test scenarios, etc.) and using the right tool can improve the overall testing process.

Cross browser testing should be performed for web products since it helps in providing consistent behavior and performance across different combinations of web browsers, operating systems, and devices. Choosing the right cross browser testing platform that has API support and powerful report generation features can reduce the overall effort spent on test related activities of your product.

LambdaTest serves the purpose of helping you perform automated cross browser testing on cloud with a maintenance-free Selenium Grid offering 3000+ real browsers, along with integrations to numerous CI/CD tools, and RESTful Selenium API for extracting HTML reports in PyUnit and every other test automation framework that offers compatibility with Selenium. Go sign up for free, if you haven’t already!

How To Use Robot Framework For Parallel Test Execution

himanshuseth004 — Mon, 26 Jun 2023 11:58:06 +0000

How To Use Robot Framework For Parallel Test Execution

Over the years, there have been monumental changes in the processes used for developing, testing, and delivering software. Development & release cycles have become considerably short, with Continuous Integration and Continuous Delivery (CI/CD) catalyzing these changes.

Continuous testing is one of the guiding pillars of the continuous integration process, as it aids in accelerating feedback and improving product quality. There is a constant race against time, but acceleration shouldn’t be achieved at the cost of quality!

This is where automated testing at scale can prove beneficial in unearthing bugs and increasing the overall test coverage. All of this can be achieved by accelerating the CI/CD pipelines with parallel tests (or parallel test execution). On a lighter note, parallel testing is one of the most trusted & reliable friends of CI/CD 🙂

The majority of the test automation frameworks provide the flexibility to run tests in parallel at different levels — test, test suite, method, class, and more. Though the level of parallelism depends on the nuances of the underlying framework, you need to choose the parallelism approach based on your execution requirements.

When it comes to automated testing with Python, there is flexibility to choose from several frameworks — PyUnit, Pytest (or pytest), Behave, and Robot, amongst others.

Frameworks like pytest support parallel test execution out of the box, whereas parallel testing in Robot, PyUnit, etc., is enabled using supporting tools and libraries. In this blog on using the Robot framework for parallel test execution, I will cover how to run automation tests in parallel using the Robot framework on the local grid, as well as the cloud Selenium grid.

Let’s get started by quickly revisiting the concepts of the Robot framework for parallel test execution.

*Discover essential tips and agile interview question in our comprehensive tutorial. Prepare effectively and ace your next agile interview. *

What is Robot Framework?

For starters, Robot is a popular Python-based extensible keyword-driven open-source framework. It is primarily used for test automation, Acceptance Test Driven Development (ATDD), Behavior Driven Development (BDD), and Robotic Process Automation (RPA ).

The Robot framework uses an easy-to-read syntax that utilizes human-readable keywords. The framework-agnostic keywords define the actions that must be performed in a particular test.

Keywords in the Robot framework are divided into three categories:

High-level keywords

High-level keywords provide an abstract representation of the underlying business functionality. They improve the readability and maintainability of the test cases since they can encapsulate low-level keywords.

They should resonate with the actions being performed in the said use case. Consider a banking application (or website) where users need to login before doing any financial transaction. Login, Transfer Amount, etc., are some of the high-level keywords in line with the business case.

Low-level keywords

Low-level keywords represent the operations performed as a part of the test scenario. These keywords, defined in libraries or resource files, can be either custom-built libraries or built-in keywords provided by the Robot framework.

Keywords that are a part of the BuiltIn library and SeleniumLibrary in Robot can be leveraged in automating test scenarios. Should Contain, Should Be Equal, Skip If, etc., are some of the keywords that are a part of the BuiltIn library. Select From List By Value, Input Text, Click Button, Click Element, Wait Until Element Is Visible, etc., are some of the prominent keywords that are a part of the SeleniumLibrary.

The SeleniumLibrary in Robot uses the Selenium WebDriver, which further helps automate interactions with the web browser.

Here is the sample usage of low-level keywords for creating high-level keywords.

Here’s 295+ Selenium Interview Questions with Answers that will help you boost your confidence in an Interview.

Technical keywords

Technical keywords are built-in keywords that help with test management and test execution. They help with logging, controlling execution flow, and error handling.

Capture Page Screenshot, Capture Element Screenshot, Pass Execution If, Log, Log To Console, etc., are some of the technical keywords in Robot. For instance, the keyword to Capture Element Screenshot can be leveraged for capturing a screenshot of a certain WebElement and comparing it across different releases.

In the below-mentioned example, we capture the screenshots of the entire webpage and the Button element. The screenshots are placed in a customized directory instead of ${OUTPUT_DIR} (or present working directory).

Along with BuiltIn and SeleniumLibrary, we have also included the OperatingSystem library for using Directory-related keywords (i.e., Create Directory and Directory Should Exist).

Robot Framework Architecture

Robot is an open-source, extensible, and language-independent framework. All of this is possible using the test libraries written in that particular programming language.

The Remote Library Interface allows the test libraries to be run as external processes. It uses the XML-RPC protocol for communication; hence test libraries can be implemented for programming languages (e.g., Java, C#, JavaScript, etc.) that support the protocol. For example, the jrobotremoteserver is a remote server for the Robot framework implemented using Java.

Here are some of the major building blocks of the Robot Framework:

Robot Framework

Referred to as the framework’s core which is implemented in Python. It is primarily responsible for test execution and test case management.

The core has no information regarding the TUT (Target Under Test), as the entire interaction is handled by the test libraries. It is also responsible for features related to logging and reporting.

Test Data

As the name indicates, test data serves as the input to the test cases. The test data is written in a tabular format to enhance the maintainability of the tests.

Once the Robot framework receives the input data, it starts executing the test scenarios and generates detailed reports in HTML format. Robot also offers integration with popular reporting tools & dashboards like Allure, Report Portal, and Grafana.

High-level Architecture — Robot Framework

Get ready to ace your JUnit interviews in 2023 with our comprehensive list of 90 junit interviews questions and answers that will help you sharpen your testing skills.

Test Libraries

As seen in the architecture diagram, Test Libraries act as the bridge (or interface) between the Robot Framework Core and SUT. Test libraries in Robot contain the keywords, thereby improving its maintainability & reusability.

Apart from Robot Standard Libraries, SeleniumLibrary in Robot can be extensively used when performing automated testing using the framework. Do check out this exhaustive list of Robot libraries that comprises mid-level (framework) Libraries, low-level (driver) Libraries, and Remote Libraries.

System Under Test (SUT)

This is the target on which the automated tests are performed. It could be either a website or a web application.

Test Cases in Robot consist of Test Steps that, in turn, use the Test Libraries for realizing interactions with the SUT. Like any other test automation framework, test cases can be organized in test suites for improved maintenance.

Benefits of Parallel Testing in Robot Framework

The Robot framework does offer out-of-the-box support for parallel test execution. However, it recommends the usage of Pabot — a parallel test executor for tests written using the Robot framework.

Before we deep dive into using the Robot framework for parallel test execution with Pabot, let’s quickly revisit the salient benefits of parallel test execution.

Accelerated Test Execution

By default, Robot tests run in a sequential manner. The serial execution applies to tests as well as test suites. Even if a single test takes a few seconds to execute, the complete test execution time might go up to a few minutes (for a significantly last test suite).

Running tests serially might yield results in the short run, but the approach falters when test suites consisting of numerous tests have to be executed in a CI/CD pipeline. This is where parallel testing in Robot can be highly instrumental, as it helps accelerate the test execution by leveraging parallelism at the test and/or test-suite level.

Increased Test Coverage

Parallel test execution in Robot helps improve product quality, as tests are run across different input combinations. The said combination can consist of generic input values (e.g., input URL, email address), browser names, browser versions, platform names, etc., depending on the scenario under test.

Below is an example of a Robot script where tests will be executed in parallel on Chrome and Safari browsers. This logic can be further scaled to run tests on different input combinations.

All of this eventually helps increase the overall test coverage and identify issues at a significantly faster pace.

This exhaustive list of TestNG interview questions will aid you in strengthening your position as a candidate for the TestNG interview.

Faster Feedback Cycles

As seen so far, there are umpteen benefits of speeding up test cycles using parallel test execution. Another major benefit of parallel testing is shortened feedback loops for issue discovery, bug fixes, and testing the fixes for potential side effects.

The same guiding principles also apply to the Robot framework, as continuous testing with Robot can be realized by running parallel tests in a CI pipeline. Jenkins, GitLab, TeamCity, Azure DevOps, and GitHub Actions are some of the top CI/CD tools supported by the Robot framework.

The combination of parallel testing & CI/CD aids in improving the effectiveness of the pipeline, shortening feedback cycles, and improving product quality at every step of product development.

Achieve More with Fail-Fast Approach

Consider a scenario where you have 100’s of tests triggered in a CI/CD pipeline but only a selected few (e.g., 10 tests) fail all the time. What if these 10 independent tests are run in parallel in the next execution cycle? This approach will be instrumental in ensuring that tests are completed quickly or fail-fast, thereby helping save time as well as crucial $!

It is essential to note that tests when executed in parallel, might exhibit flakiness in case tests are interdependent or reliant on any sort of ordering. Apart from following Selenium’s best practices for test case design, you could also look at reducing the number of parallel processes.

Robot framework provides the flexibility to re-run only failed tests, post which the results can be merged into a single results file using rebot.

You can refer to the Robot official documentation that deep dives into flaky-test management and re-execution of failed tests.

Apart from the benefits mentioned above, I would recommend revisiting this blog that deep-dives into all the major benefits of parallel testing. Now that the platform is all set let’s look at how to leverage Pabot (Parallel Robot Framework) for realizing parallel test execution.

Here’s a list of 70 Cucumber Interview Questions and Answers that will help you boost your confidence in an Interview.

Introduction to Pabot (Parallel Robot Framework)

The Robot framework executes individual tests and tests within multiple test suites in a sequential manner. In case you want a quick recap of Robot, look at this detailed Robot framework tutorial, where we have covered all the essential aspects of Robot, including test execution on local and cloud Selenium grid(s).

As mentioned earlier, Pabot is a parallel test runner for the Robot framework. Pabot lets you run Robot tests in parallel at test-level as well as test-suite level.

By default, Pabot does parallelization at the test suite level. Each process has its own memory space and runs a single test suite. In this case, individual tests within the test suite run sequentially, whereas all the test suites (e.g., test1.robot, test2.robot, etc.) run in parallel.

Resource file(s) normally houses reusable components like high-level keywords, variables, libraries, and other settings normally used across tests and test suites.

Below is an example Resource file (e.g., common.robot):

Sample Resource File

Get ready for your BDD interview with 100+ BDD interview questions. Boost your confidence and impress your interviewer with this comprehensive guide covering principles & techniques.

Installation

Like any other Python package, Pabot can also be installed globally or inside a virtual environment (venv). At the time of writing this blog on using Robot framework for parallel test execution, the latest version of Pabot is 2.15.0.

Global installation of Pabot

Invoke the following command on the terminal to install Pabot:

pip3 install -U robotframework-pabot

Though pip3 is the recommended package manager for Python 3.x, you can still use pip with Python 3.x. In that case, the installation command is pip install -U robotframework-pabot.

Pabot installation in Virtual Environment (virtualvenv)

Virtual Environment (virtualvenv) provides much-need isolation of builds, thereby providing better management of Python packages for different projects.

Follow the below-mentioned steps for installing Pabot in venv:

Run the command pip3 install virtualenv on the terminal if venv is not installed on your machine.

Create a virtual environment in the project folder by invoking the virtualenv venv command on the terminal. It is important to note that the environment name (i.e., venv in our case) is arbitrary.

Activate the environment (i.e., venv) by invoking the source venv/bin/activate command on the terminal.

Invoke the command pip3 install robotframework-pabot to install the latest version of Pabot.

Navigate your Laravel interview with ease! Our guide covers over 190 Laravel interview questions to help you land your ideal tech job.

Usage

Now that the Pabot installation is successful, let’s look at the commands to achieve parallelism at test and test-suite levels. By default, Pabot splits the execution at the suite level. Every process runs a single suite, you can also configure the number of parallel executors using the –processes option.

If not specified, Pabot enables two CPU cores that run one process each. Specifying all in –processes creates as many processes as the number of executable test suites or tests. However, this option must be used with caution, as too much parallelism might affect the performance and/or cause invalid test failures.

Parallel Execution with Pabot at suite-level (default)

pabot [path to tests]

For instance, the command shown below starts 2 processes and runs test suites located in Tests/CloudGrid folder in parallel.

pabot — verbose Tests/CloudGrid

As seen below, two processes (with PID 91894 and 91895) running in parallel are executing different test suites.

Parallel Execution with Pabot at test level

pabot — verbose — testlevelsplit [path to tests]

For instance, the command shown below starts 2 processes and runs individual tests located in test suites in the Tests/CloudGrid folder in parallel.

pabot — verbose — testlevelsplit Tests/CloudGrid

As seen below, two processes (with PID 93731 and 93732) running in parallel are executing two separate tests — App.Example 1 & App.Example 2

Customize the number of parallel processes

As mentioned earlier, the –processes option lets you achieve the same. Simply specify the number of processes (in integer format) that you want to start in parallel.

pabot — verbose — processes <num_of_processes>

In the below command, we have specified the number of parallel processes as 4 with parallelism at the test level. However, only 3 parallel processes (PID — 95319, 95320, and 95320) are kick-started since maximum tests in a particular test-suite is 3.

pabot — verbose — testlevelsplit — processes 4 <path_to_tests>

Run pabot –help on the terminal in case you want to have a look at other options supported by the runner.

Ace your Unit testing interview questions with our comprehensive interview questions and solutions for unit testing, covering topics from syntax to advanced techniques.

In a nutshell, Pabot can be used for parallel test execution to optimize resource utilization by leveraging the available memory and CPU cores in the machine.

Now that we have covered all the essentials of Pabot, let’s look at using Robot framework for parallel test execution on Local Grid as well as LambdaTest cloud Grid.

Demo: Parallel Testing in Selenium Robot using Pabot

The primary pre-requisite for the demonstration is Python 🙂, you can refer to getting started with Selenium Python in case you need a quick recap of Python for Selenium automated testing. For demonstrating parallel testing with Robot using Pabot, I would be running the same test scenarios across the local grid and LambdaTest cloud grid.

I am using a macOS (Ventura 13.4) machine with the latest versions of Chrome and Safari installed. Some of the steps might vary in case you are using some other platform (e.g., Windows).

Test Suite 1

Test Scenario — 1

Navigate to https://lambdatest.github.io/sample-todo-app/.
Select the first two checkboxes.
Send ‘Yey Let’s add it to list’ to the textbox with id = sampletodotext.
Click the Add Button and verify whether the text has been added or not.

Test Scenario — 2

Navigate to https://lambdatest.github.io/sample-todo-app/
Select the first, second, and fifth checkboxes.
Send ‘Yey Let’s add it to list’ to the textbox with id = sampletodotext.
Click the Add Button and verify whether the text has been added or not.

Test Suite 2

Test Scenario — 1

Navigate to https://www.lambdatest.com/selenium-playground/
Click on the element ‘Input Form Submit’.
Enter all the required details in the newly opened form.
Submit the items.

Project Prerequisites

Before I deep dive into the implementation, let’s do a quick walk-through of the setup used for implementing the scenarios. I am using Visual Studio (VS) Code IDE and Poetry Package Manager (instead of pip) as it simplifies project management to a huge extent.

Follow the below-mentioned steps for creating a Robot project in VS Code:

Step 1

After adding the project in VS Code, please run the command to create a virtual environment after navigating to the parent project folder.

virtualenv venv

source venv

Step 2

Install Poetry by invoking the following command on the terminal:

pip3 install poetry

Step 3

Dependencies, plugins, and build configurations are a part of pyproject.toml. In our case, we have already added the respective packages and dependencies in project.toml.

[tool.poetry]
name = "robot-parallel-tests"
version = "0.1.0"
description = ""
authors = ["Himanshu Jagdish Sheth <himanshu.sheth@gmail.com>"]
readme = "README.md"


[tool.poetry.dependencies]
python = "^3.11"
selenium = "4.9.0"
flake8 = "^6.0.0"
autopep8 = "^2.0.2"


[build-system]
requires = ["poetry-core"]
build-backend = "poetry.core.masonry.api"

If pyproject.toml is not present for your project, run the command poetry init on the terminal. Post that, select the following packages using Poetry (via pyproject.toml):

Python (v 3.11.0)
Selenium (v 4.9.0)
Flake8
Autopep8

Select the relevant package name and version from the list (e.g., selenium, autopep8, etc.).

Once all the packages are selected for pyproject.toml, press Enter to complete the generation of the file.

This questionnaire intends to provide a list of some of the most frequently asked Jenkins interview questions to assist job seekers in preparing for interviews.

Step 4
Invoke the command poetry install for setting up the project configurations. On completion, this will generate the files pyproject.toml and p*oetry.lock*.

Step 5
Install the project dependencies (i.e., selenium, robotframework, and robotframework-seleniumlibrary).

selenium==4.9.0
robotframework
robotframework-seleniumlibrary

Invoke the command pip3 install -r requirements.txt to install the project dependencies (or packages).

Project Setup

Shown below is the project setup that will be used in the Robot framework for parallel test execution on the local grid and LambdaTest cloud grid.

Here is a gist of the overall folder structure:

Resources/PageObject

This folder contains three subfolders — Common, KeyDefs, and Locators that contain implementation related to test execution status and high-level keywords used in the tests.

Tests

As the name indicates, Tests contain implementation of the actual tests using the Robot framework for parallel test execution with the Pabot runner.

Since the demo will be performed on the local grid and the cloud-based LambdaTest grid, we have segregated the test implementation into separate subfolders — LocalGrid and CloudGrid

Apart from the folders mentioned above, we have pyproject.toml & requirements.txt that contain build system-related settings & project dependencies, respectively.

For better continuity, I will cover aspects related to execution on the cloud grid in a separate section.

Here’s Top 30+ CI CD Interview Questions and Answers that will help you boost your confidence in an Interview.

Implementation

For better code maintainability, we have used Page Object Model (POM) in Selenium Python to decouple the dependency between the locators and test code. Let’s dive deep into the specifics of the implementation!

Resources/PageObject/Locators

To ensure that changes in the locators have minimal impact on the test code, locators used in the test cases are placed in the Locators.py file.

# ToDo Page Locators


FirstItem = "name:li1"
SecondItem = "name:li2"
FifthItem = "name:li5"
AddButton = "id:addbutton"
ToDoText = "id:sampletodotext"


NewItemText = "Yey Let's add it to list"
NewAdditionText = "xpath=/html/body/div/div/div/ul/li[6]/span"


# Selenium Playground Page Locators


SubmitButton = "xpath=//a[.='Input Form Submit']"
Name = "name:name"
email = "id:inputEmail4"
passwd = "//input[@name='password']"
company = "//input[@id='company']"
website = "css=#websitename"
country = "name:country"
city = "//input[@id='inputCity']"
address1 = "id:inputAddress1"
address2 = "id:inputAddress2"
state = "css=#inputState"
city = "//input[@id='inputCity']"
zip code = "css=#inputZip"
FinalSubmission = "xpath=//*[@id='seleniumform']/div[6]/button"


SuccessText = "Thanks for contacting us, we will get back to you shortly."

Here, we have used different locators in Selenium, like ID, CSS Selector, linkText, XPath, etc., to locate WebElements on the page. The WebElements can be located using built-in Inspect Tools or plugins like SelectorsHub, POM Builder, etc.

Let’s take the case of the URL https://lambdatest.github.io/sample-todo-app/ used in Test Scenario — 1. The Name locator in Selenium is used for locating the elements ‘First Item’ and ‘Second Item’.

On similar lines, the ID locator in Selenium is used for locating the ‘Add’ button on the page.

Lastly, once the new item is added to the ToDo list, it is located using the XPath locator in Selenium.

On similar lines, we have used the combination of CSS Selectors, Name, ID, and XPath locators for locating WebElements on LambdaTest Selenium Playground.

In case you have any confusion in choosing the best-suited selectors, do look at the CSS Selectors vs XPath guide for making a more informed decision.

Resources/PageObject/KeyDefs
Opening & Closing web browser on local grid
Opening & Closing web browser on a particular OS on LambdaTest cloud grid

 Settings 
    Library  SeleniumLibrary
    Library  OperatingSystem
    Library  BuiltIn
    Library  ../Common/LambdaTestStatus.py


    *** Variables ***
    ${REMOTE_URL}       @hub.lambdatest.com/wd/hub">http://%{LT_USERNAME}:%{LT_ACCESS_KEY}@hub.lambdatest.com/wd/hub
    ${TIMEOUT}          3000


    *** Keywords ***
    Open test browser
       [Arguments]     ${TEST_URL}     ${BROWSER}      ${CAPABILITIES}
       [Timeout]       ${TIMEOUT}
       Open browser    ${TEST_URL}     ${BROWSER}
       ...  remote_url=${REMOTE_URL}
       ...  desired_capabilities=${CAPABILITIES}


    Close test browser
       Run keyword if  '${REMOTE_URL}' != ''
       ...  report lambdatest status
       ...  ${TEST_NAME}
       ...  ${TEST_STATUS}
       Close Browser


    Open local test browser
       [Arguments]     ${TEST_URL}     ${BROWSER}
       [Timeout]       ${TIMEOUT}
       Open browser    ${TEST_URL}     ${BROWSER}


    Close local test browser
       Close Browser

To get started, we include all the relevant libraries, resource files, and variable files in the Settings section. As seen below, we have imported the SeleniumLibrary, which provides low-level keywords for automating interactions with the elements on the page.

It is important to note that Selenium2Library has been renamed to SeleniumLibrary since Robot version 3.0. Hence, we have used SeleniumLibrary throughout this blog on using Robot Framework for parallel test execution.

Open local test browser is a high-level keyword that takes two input arguments — Test URL and Test Browser. It internally uses the low-level keyword Open browser for instantiating the respective browser and opening the Test URL.

Close local test browser is a high-level keyword that internally uses the Close browser for closing the instantiated browser.

Tests/LocalGrid

This folder contains two .robot files that contain the implementation of the two test scenarios. Let’s look at some of the common aspects of the test files.

*** Settings ***


Resource    ../../Resources/PageObject/KeyDefs/Common.robot
Variables   ../../Resources/PageObject/Locators/Locators.py


Test Teardown  Common.Close local test browser


Library    BuiltIn


*** Variables ***


${site_url}         https://lambdatest.github.io/sample-todo-app/


*** Comments ***
# Configuration for first test scenario


*** Variables ***


&{lt_options_1}
   ...  browserName=Chrome


${BROWSER_1}          ${lt_options_1['browserName']}


*** Comments ***
# Configuration for second test scenario


*** Variables ***


&{lt_options_2}
   ...  browserName=Safari


${BROWSER_2}          ${lt_options_2['browserName']}


*** Test Cases ***


Example 1: [ToDo] Parallel Testing with Robot framework
   [tags]  ToDo App Automation - 1
   [Timeout]   ${TIMEOUT}
   Open local test browser ${site_url}     ${BROWSER_1}
   Maximize Browser Window
   Sleep  3s
   Page should contain element  ${FirstItem}
   Page should contain element  ${SecondItem}


   Click button  ${FirstItem} 
   Click button  ${SecondItem}

   Input text  ${ToDoText}  ${NewItemText}
   Click button  ${AddButton}
   ${response}    Get Text    ${NewAdditionText}
   Should Be Equal As Strings    ${response}    ${NewItemText}
   Sleep  5s
   Log    Completed - Example 1: [ToDo] Parallel Testing with Robot framework


Example 2: [ToDo] Parallel Testing with Robot framework
   [tags]  ToDo App Automation - 2
   [Timeout]   ${TIMEOUT}
   Open local test browser ${site_url}     ${BROWSER_2}
   Maximize Browser Window
   Sleep  3s
   Page should contain element  ${FirstItem}
   Page should contain element  ${SecondItem}
   Page should contain element  ${FifthItem}


   Click button  ${FirstItem} 
   Click button  ${SecondItem}
   Click button  ${FifthItem} 

   Input text  ${ToDoText}  ${NewItemText}
   Click button  ${AddButton}
   ${response}    Get Text    ${NewAdditionText}
   Should Be Equal As Strings    ${response}    ${NewItemText}
   Sleep  5s
   Log    Completed - Example 2: [ToDo] Parallel Testing with Robot framework

Since the Test Teardown keyword executes after every test case and test suite, we invoke the Close local test browser keyword in Common.robot for closing the browser instance.

Test Scenarios (1) & (2) from Test Suite 1 will be executed in parallel on Chrome & Safari browsers. Two user-defined variables, lt_options_1 and lt_options_2, are used for assigning the respective browser to the browserName setting. In our case, they are set to Chrome and Safari respectively.

Discover essential tips and agile interview question in our comprehensive tutorial. Prepare effectively and ace your next agile interview.

The test URL is first opened using the Open local test browser keyword with the test URL and test browser passed as input arguments. The web browser is maximized as it is considered a good Selenium practice.

The Page should contain element keyword of SeleniumLibrary is used for checking the presence of the checkboxes (for first & second items) on the page. The items are checked using the Click button keyword in SeleniumLibrary.

Lastly, the Input text keyword is used for inputting “Yey Let’s add it to list” *as the new item in the ToDo app. The *Add button is clicked to add the said item to the list.

The Get Text keyword in SeleniumLibrary returns the text value of the element identified by the below-mentioned XPath.

The Should Be Equal As Strings keyword in the BuiltIn library compares the string value assigned to ${response} with the expected value. The test fails if both the string objects are unequal.

*** Settings ***


Resource    ../../Resources/PageObject/KeyDefs/Common.robot
Variables   ../../Resources/PageObject/Locators/Locators.py


Test Teardown  Common.Close local test browser


Library    BuiltIn


*** Variables ***


${site_url}         https://www.lambdatest.com/selenium-playground/


*** Comments ***
# Configuration for first test scenario


*** Variables ***


&{lt_options}
   ...  browserName=Firefox


${BROWSER}          ${lt_options['browserName']}


*** Test Cases ***


Example 2: [Playground] Parallel Testing with Robot framework
   [tags]  Selenium Playground Automation
   [Timeout]   ${TIMEOUT}
   Open local test browser ${site_url}     ${BROWSER}
   Maximize Browser Window
   Page should contain element  xpath://a[.='Input Form Submit']


   Click link  ${SubmitButton}
   Page should contain element  ${Name}
   # Enter details in the input form


   # Name
   Input text  ${Name}   TestName
   # Email
   Input text  ${email}       testing@gmail.com
   # Password 
   Input text  ${passwd}       Password1
   # Company
   Input text  ${company}      LambdaTest
   # Website
   Input text  ${website}      https://wwww.lambdatest.com
   # Country
   select from list by value    ${country}     US
   # City
   Input text  ${city}       San Jose
   # Address 1
   Input text  ${address1}      Googleplex, 1600 Amphitheatre Pkwy
   # Website
   Input text  ${address2}       Mountain View, CA 94043
   # State
   Input text    ${state}          California
   # City
   Input text  ${city}       San Jose
   # Zip Code
   Input text  ${zipcode}      94088
   Sleep  5s


   Click button      ${FinalSubmission}
   Execute JavaScript    window.scrollTo(0, 0)
   Page should contain  ${SuccessText}
   Sleep  2s


   Log    Completed - Example 2: [Playground] Parallel Testing with Robot framework

*Here’s 295+ Selenium Interview Questions with Answers that will help you boost your confidence in an Interview. *

The test scenario in the above test suite is executed only on the local Firefox browser. Once the test URL is opened using the Open local test browser *keyword, a check is performed to validate if *Input Form Submit *is present on the page. The WebElement is located using the XPath property, and its presence is validated using *Page should contain element *keyword of *SeleniumLibrary.

Once the click is performed, the Input Form Demo opens up. Here, entries in the text boxes (i.e., Name, Email, Password, etc.) are populated using the Input text *keyword in *SeleniumLibrary.

Get started with this complete Selenium automation testing tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing.

Lastly, the select from list by value keyword is used for selecting “US” from the country drop-down.

Once the inputted data is submitted by clicking the Submit button, the Execute JavaScript keyword in SeleniumLibrary is used for triggering a window scroll to the start of the page. The keyword’s functionality is very much similar to that of JavaScriptExecutor in Selenium WebDriver!

Finally, the presence of the text “Thanks for contacting us, we will get back to you shortly.” is checked to verify if the page submission was successful.

A comprehensive Acceptance Testing (UAT) tutorial that covers what User Acceptance Testing is, its importance, benefits, and how to perform it with real-time examples.

⚡💡SeleniumLibrary is not thread-safe; hence there is no safety-net for concurrent access to browser instances or parallel test execution across multiple threads.

Pabot runner eliminates the thread-safety issue, as parallelism is done at the process-level (not the thread-level). Each process in Pabot has its own memory space, due to which parallel processes can run in isolation without interfering with each other!

Execution

Before using the Robot framework for parallel test execution, let’s run the same tests sequentially. This is to benchmark the test execution time (or performance) when the same test scenarios are run in parallel using Pabot runner.

Please clone the repo in case you have not done the same. After completing the steps mentioned in the Project Prerequisites section of this blog on using the Robot framework for parallel test execution.

Serial Test Execution (Purpose: Benchmarking)

Invoke the following command to run the test scenarios located in Tests/LocalGrid folder serially.

It is essential to note that the time taken for execution also depends on factors like machine performance, browser performance, network connectivity, and more. Hence, the numbers being showcased might vary depending on the factors mentioned above.

robot Tests/LocalGrid/

A comprehensive Exploratory Testing tutorial that covers what Exploratory Testing is, its importance, benefits, and how to perform it with real-time examples.

As seen in the Test Report, the serial test execution of three test scenarios took around 50 seconds on my machine (i.e., MacBook Pro, 2 GHz Quad-Core Intel Core i5 processor).

Let’s see what happens when the tests and/or test suites are run in parallel using Pabot runner.

Parallel Test Execution (Default: Suite-Level)

By default, Pabot splits the test execution at the test-suite level, with each process running a separate suite. Tests inside a test-suite (i.e., *.robot file) run in series, whereas the suites run in parallel.

In our case, we have two test-suites where test_todo_app.robot consists of two test scenarios, whereas test_sel_playground.robot consists of a single test scenario.

Invoke the following command on the terminal to run Robot test suites in parallel using Pabot.

pabot — verbose — outputdir results — log local_test_parallel_log.html — report local_test_parallel_report.html Tests/LocalGrid/

– –verbose : Increase the verbosity level
– –outputdir : Specify the directory used for storing the results
– –log : Name of the log file generated post test execution
– –report : Name of the report file (in specified format) generated post test execution

Shown below is the execution snapshot which indicates the test execution was successful:

A comprehensive UI testing tutorial that covers what UI testing is, its importance, benefits, and how to perform it with real-time examples.

Here are some interesting things to notice from the test execution:

Test suites are executing in parallel, with each process (PID: 78954 and PID:78955) running a separate suite
A file named .pabotsuitenames is auto-generated during the phase of test execution. It contains information related to test suites when they are executed in parallel.

FileName — .pabotsuitenames

The total test execution time has come down from 50 seconds *(with serial execution) to *23 seconds (with suite-level parallelism).

In this Appium tutorial, learn about Appium and its benefits for mobile automation testing. Take a look at how Appium works and see how to perform Appium testing of your mobile applications.

In a nutshell, suite-level parallelism with Pabot provided ~50 percent savings in test execution time!

Parallel Test Execution (Test-Level)

Pabot lets you achieve parallel execution at test-level through the –testlevelsplit option. In case .pabotsuitenames contains both tests and test-suites, then –testlevelsplit will only affect new suites and split only them.

Here, each process runs a single test case. For instance, if the test suite(s) have four tests (e.g. T1, T2, T3, T4), then four separate processes (P1, P2, P3, P4) will run each test in parallel. Test-level parallelism must be preferred over suite-level parallelism in cases where suite(s) have a large number of independent tests that can run concurrently.

In our case, there are three test scenarios that can run in parallel.

Invoke the following command on the terminal to run individual tests in parallel using Pabot.

pabot — verbose — testlevelsplit — outputdir results — log local_test_parallel_log.html — report local_test_parallel_report.html Tests/LocalGrid/

Since there are three tests in total, three parallel processes are invoked with each running a single test. As seen in the test execution screenshot, three parallel processes (PID: 92660, 92661, and 92662) handle one test scenario each.

The total test execution time has come down from 50 seconds (with serial execution) and 23 seconds (with suite-level parallelism) to 14 seconds (with test-level parallelism).

It is important to note that the total execution time might vary from one run to another. For instance, subsequent runs (with the same load conditions) resulted in 16 seconds & 17 seconds, respectively.

Customize Number of Parallel Executors

There are scenarios where you might want to invoke more/less parallel executors to achieve more out of parallelism with the Robot framework. This is where the –processes option lets you customize the number of parallel executors for test case execution. It is recommended to take the available resources (physical CPU cores, memory, etc.) into account when customizing the number of parallel executors.

pabot — processes <num_parallel_processes>

Let’s do a test split execution with 2 parallel processes and see the difference. Invoke the following command on the terminal:

pabot — verbose — testlevelsplit — processes 2 — outputdir results — log local_test_parallel_log.html — report local_test_parallel_report.html Tests/LocalGrid/

As seen from the execution snapshot and test report, the total test execution time is 25 seconds (i.e., same as test-suite level execution). However, the execution time might vary from one test run to another.

To summarize, both thread-level and suite-level parallelism can potentially accelerate test execution time. However, you must keep a watchful eye on test dependencies and available resources (i.e., CPU cores, memory, etc.) to avoid conflicts or flaky tests (or unexpected results).

Parallel Testing using Pabot on Cloud Grid

So far, we have demonstrated using the Robot framework for parallel test execution with Pabot on the local machine (macOS Ventura). So far, so good 🙂However, a challenge arises if tests have to be performed on different platforms and browser combinations. What if we have to execute the tests mentioned above on the latest and/or older version of Chrome, Firefox, etc., installed on Windows 10 and Windows 11 machines?

In such cases, we can leverage the benefits of cloud testing as it helps in executing automated UI tests at scale reliably and securely. With the rapid proliferation of cloud technologies, it is imperative to lean on cloud testing to realize:

Reduced infrastructure costs
Better test coverage
Shortened developer feedback
Improved product quality

In this section of the Selenium Python testing tutorial using Robot framework, we will demonstrate how to port the existing Robot tests so that it runs on LambdaTest cloud grid. LambdaTest is a cloud-based digital experience testing platform that lets you run Selenium automation tests with Robot on 3,000+ browsers and operating systems online!

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automation testing, Selenium testing, Cypress, CI/CD, and more.

Visit our support documentation to get started with Selenium Python testing.

To get started, you need to create an account on LambdaTest. Post that, please make a note of your username and access key, which are available in the LambdaTest Profile section.

Now export the environment variables LT_USERNAME and LT_ACCESS_KEY, as they are required for running tests on LambdaTest.

Project Setup

Prerequisites and Project setup remain almost the same as shown in the ‘Parallel Testing Demonstration’ earlier. The only difference is that the ported tests are located in the Tests/CloudGrid folder.

Implementation (Porting Changes for Execution on Cloud Grid)

As the first step, we copy the relevant capabilities from the LambdaTest Capabilities Generator. Since SeleniumLibrary *is compatible with Selenium 4, we choose the capabilities for Python with Selenium 4. Though there is no separate mention of *Robot in the ‘Select your framework’, you can still use the capabilities-related nomenclature in the implementation.

For instance, you can use the following when setting the capabilities (all in String format):

CAPABILITIES (SELENIUM 4)	SAMPLE VALUES
platformName	Windows 11, MacOS Ventura, etc.
browserName	Chrome, Firefox, Safari, etc.
browserVersion	String value based on the browser used for testing
w3c	True (when tests are executed using Selenium 4)
Name (optional)	Test name
Build (optional)	Build name
Project (optional)	Project name

The first test scenario (for ToDo app) is to be tested on Chrome (latest version) on Windows 11. Shown below are the capabilities:

FileName — Tests/CloudGrid/test_todo_app.robot

Capabilities for Test Scenario — 1 (Test Suite — 1)

Capabilities for Test Scenario — 2 (Test Suite — 1)

On similar lines, we updated the capabilities for browser & combinations used in Test Scenario — 1 (of Test Suite — 2).

Capabilities for Test Scenario — 1 (Test Suite — 2)

We have added a few Variables and High-level keywords that will be used for opening test browser(s) on the desired operating system (or platform).

FileName — Resources/PageObject/KeyDefs/Common.robot

${REMOTE_URL} is the LambdaTest Hub address which will be further used by the Open Browser keyword in Robot to open the desired browser (e.g., Chrome) on the respective platform (e.g., Windows 11).

*Image Source*

Two high-level keywords are created for opening and terminating the browser instance instantiated on the desired platform (or OS). LambdaTest Hub URL and Desired Capabilities are passed as parameters to the low-level keyword Open browser.

FileName — Resources/PageObject/KeyDefs/Common.robot

High-level keyword: Open test browser

High-level keyword: Close test browser

Now that the infrastructure-level settings are all done, let’s look at the changes in the test logic (in Tests/CloudGrid/test_sel_playground.robot).

Step 1 (Addition of Grid URL and Capabilities)

As mentioned earlier, we first add the desired capabilities comprising of the remote browser, version, and user-defined capabilities (i.e. Project name, Test name, etc.) for LambdaTest.

Step 2 (Open Test Browser on Test OS )

The high-level keyword Open test browser which accepts three parameters — Test URL, Browser, and Desired Capabilities.

There is no change in the core test logic, except that Close test browser high-level keyword is used for closing the instantiated browser instance.

Execution

Before execution, set the environment variables LT_USERNAME and LT_ACCESS_KEY on the terminal. You can find the same in the LambdaTest Profile section.

macOS/Linux

export LT_USERNAME="YOUR_LAMBDATEST_USERNAME"
export LT_ACCESS_KEY="YOUR_LAMBDATEST_ACCESS_KEY"

Windows

set LT_USERNAME="YOUR_LAMBDATEST_USERNAME"
set LT_ACCESS_KEY="YOUR_LAMBDATEST_ACCESS_KEY"

Now that the environment variables are set, invoke the following command on the terminal to run individual tests in parallel (on LambdaTest Grid) using Pabot.

pabot — verbose — testlevelsplit — outputdir results — log cloud_test_parallel_log.html — report cloud_test_parallel_report.html Tests/CloudGrid/

The above command will kick-start three processes, each of which runs a test scenario (or test case) in parallel. Shown below is the terminal and LambdaTest dashboard screenshot(s) that indicates that the parallel execution resulted in Success. 🚀

Execution in Progress

Completion of Execution

Video Grab of Test Execution

With this, we have successfully used the Robot framework for parallel test execution with Pabot on the local grid and LambdaTest cloud grid. Testing Cloud with Robot framework can be leveraged when you want to run tests at scale in continuous CI/CD pipelines!

Are you enthusiastic about becoming proficient in Python automation testing? Opting for a Selenium Python 101 certification program is an excellent choice to kickstart your path towards becoming an automation testing specialist and improving your Python abilities. Enrolling in this program will provide you with a solid groundwork for effectively utilizing Selenium Python in your testing projects, helping you excel in your automation testing journey.

In addition, you can also refer to our Robot framework interview questions and answers in case you are preparing for the interview or looking to expand your knowledge on Robot framework.

WebDriver is a remote programming interface that can be used to control, or drive, a browser either locally or on a remote machine. Learn more in this complete Selenium WebDriver Tutorial.

It’s a Wrap

Thanks for getting this far! Though the Robot framework supports sequential test execution (out-of-the-box), tests can be run in parallel by leveraging the Pabot test runner. Pabot lets you parallelize test-suites as well as tests, that too without major code modifications.

As we all know, excessive parallelism can cause test flakiness if the tests are not designed to handle concurrent execution. It becomes essential to follow Selenium’s best practices when opting for parallel test execution. You can also leverage the benefits of a cloud grid like LambdaTest in case you are looking to capitalize on the benefits of cloud testing and continuous integration.

Until next time, happy testing!

Frequently Asked Questions (FAQs)

Does Robot Framework support parallel execution?

Yes, Robot Framework does support parallel execution. Starting from version 3.2, Robot Framework introduced native support for parallel test execution.

To enable parallel execution in Robot Framework, you can use the –parallel command-line option or the –processes option to specify the number of parallel processes to use.

MSTest Setup Environment Tutorial: In 3 Easy Steps

himanshuseth004 — Wed, 12 Apr 2023 07:05:19 +0000

MSTest setup is a popular open-source test framework that is shipped along with the Visual Studio IDE. It is also referred to as Visual Studio Unit Testing Framework. However, MSTest Setup is more synonymous within the developer community.

As the MSTest framework comes pre-bundled with Visual Studio, many developers prefer MSTest over other C# frameworks such as NUnit, xUnit.net, etc. for test automation. The latest version of MSTest is 2, a major overhaul over its predecessor. The earlier version of MSTest i.e. MSTest V1 was not open-source and lacked many good features (particularly parallel test execution) which were supported by other Selenium C# testing frameworks.

MSTest V2 is cross-platform compatible, extensible, and supports parallel test execution which is one of the major requirements for performing Selenium C# testing. It also supports data-driven testing as methods can be executed multiple times by providing different input arguments. The MSTest framework recognizes the test via annotations/attributes under which the test code is present. [TestInitialize], [TestMethod], [TestCleanup] are the most widely used attributes by developers who make use of the MSTest framework for automation testing.

In this MSTest setup tutorial, I’ll take a detailed look at setting up the MSTest framework which can help you get started with MSTest on Visual Studio.

A comprehensive end to end Testing tutorial that covers what E2E Testing is, its importance, benefits, and how to perform it with real-time examples.

MSTest Setup Visual Studio For Development and Testing

Before moving ahead in this MSTest tutorial for environment setup, I’ll quickly address how to set up Visual Studio IDE for MSTest test case development. Shown below are the steps for installing Visual Studio 2019 (VS 2019):

Download The Latest Visual Studio

Download the latest version of Visual Studio i.e. Visual Studio 2019. You can choose from either Professional/Community/Edition of Visual Studio. The selection should be based on your project requirements. In this MSTest tutorial for environment setup, I’m using the Community Edition of VS 2019.

Install Necessary Platform For Development & Testing

In this MSTest tutorial for environment setup, the MSTest framework will be used for testing so we’ll be installing the necessary packages for development on the Windows platform.

Sign-In To Visual Studio IDE

In order to leverage the features of Visual Studio 2019, it is recommended that you sign-in to the IDE so that you can make use of the useful features of Visual Studio 2019 such as pushing code to private Git repository, syncing settings, and more.

In the next section of the MSTest tutorial on environment setup, I’ll take a look at steps to be followed for the installation of the mandatory packages required for executing the tests based on the MSTest framework.

This MSTest Tutorial for beginners and professionals will help you learn how to use MSTest framework with Selenium C# for performing Selenium automation testing.

Installing The MSTest Framework & MSTest Adapter

For executing automated browser testing using the MSTest framework, you need to install the corresponding test adapter as the adapter enables the execution of the test code. Installation of the MSTest adapter can be done by executing the package manager commands on the console or by accessing the package manager from the GUI. In this MSTest tutorial for environment setup, I’ll show you how to set up using both the options.

In order to install the required packages, we perform the following steps:

Step 1: Create a new project of the type ‘MSTest Test Project (.Net Core)’ in Visual Studio.

Step 2: Since the project is based on the MSTest framework, the default C# file that comes along with the project has attributes [TestMethod] and [TestClass] in it.

Even if you have not created a MSTest Test Project, you could still make use of the MSTest framework by installing the framework using the NuGet Package Manager.

Take this certification to master the fundamentals of Selenium automation testing with C# and prove your credibility as a tester.

Here’s a short glimpse of the Selenium C# 101 certification from LambdaTest:

Automated Functional Testing tests helps to ensure that your web app works as it was intented to. Learn more about functional tests, and how automating them can give you a faster release cycle.

Installing MSTest With NuGet Package

For installing the required MSTest packages for cross browser testing, you can either make use of the Package Manager commands or use the IDE to achieve the task. In case you are just getting started with Selenium C# testing using MSTest, I’ll recommend the IDE option.

Using Visual Studio IDE To Install The MSTest Framework

To install the MSTest framework and the other mandatory packages for Selenium test automation with MSTest, perform the following steps using the Visual Studio IDE:

Step 1: Add Console.WriteLine(“Selenium C#”) to the newly created .cs file.

Step 2: Navigate to Tools -> NuGet Package Manager -> Manager NuGet Packages for Solution and search for the following packages in the Browse tab.

MSTest.TestAdapter
MSTest.TestFramework
Microsoft.NET.Test.Sdk

Step 3: Click on the Install button and press OK for each of these packages so that package is installed for the current project.

Using Package Manager Commands To Install The MSTest framework

Instead of using the IDE, the Package Manager (PM) commands can also be used for installing the required MSTest packages.

Step 1: For executing commands from the PM console, navigate to Tools -> NuGet Package Manager -> Package Manager Console.

Step 2: For installation of the packages, we use the Install-Package command with the required as the argument to the command.

Install-Package MSTest.TestAdapter
Install-Package MSTest.TestFramework
Install-Package Microsoft.NET.Test.Sdk

Shown below is the installation screenshot:

Step 3: You can confirm whether the packages are installed by executing the Get-Package command on Package Manager (PM) Console.

PM> Get-Package

Id                                  Versions
--                                  --------
MSTest.TestFramework                {2.0.0}
MSTest.TestAdapter                  {2.0.0}
coverlet.collector                  {1.0.1}
Microsoft.NET.Test.Sdk              {16.2.0}

The version of MSTest framework is 2.0.0 or MSTest V2 which is currently the latest version of the MSTest framework.

Through this usability testing tutorial, you will learn how usability testing is a great way to discover unexpected bugs, find what is unnecessary or unused before going any further, and have unbiased opinions from an outsider.

Wrapping It Up

With this MSTest environment setup example, I demonstrated how to get started with the MSTest framework for Visual Studio. The steps listed in this MSTest tutorial for environment setup will help you in performing automation testing with C#.

That’s all for this MSTest tutorial on environment setup, I hope this cleared all your doubts with respect to the setup. In case of any further questions, please feel free to reach out to us in the comments section below. Help us to reach out to your peers and colleagues looking by retweeting us or sharing our posts on Social Media. Happy Testing!!?

MSTest‌ ‌Tutorial:‌ ‌Running‌ ‌First‌ ‌Selenium‌ ‌Automation‌ ‌Script‌

himanshuseth004 — Tue, 11 Apr 2023 10:27:50 +0000

MSTest is the default test automation framework which comes bundled with Visual Studio. It started out as a command-line tool for executing tests and was referred as Visual Studio Unit Testing Framework; however the name MSTest is more synonymous with the developers.

In the previous MSTest tutorial, I had a look at setting up the MSTest framework in Visual Studio. In this MSTest tutorial for Selenium automation, I’ll help you run your first script for automated web testing with Selenium C# and MSTest.

If you’re new to Selenium and wondering what it is then we recommend checking out our guide — What is Selenium?

Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful Android emulator online: https://www.lambdatest.com/android-emulator-online

Requirements For Running Your First MSTest Script

In this MSTest tutorial, I’ll use Chrome browser to verify the functionalities in the code. So, you’ll need to install the Chrome WebDriver on the machine where you’ve installed the MSTest framework and Selenium WebDriver.

Different web browsers have their own corresponding Selenium WebDrivers. These WebDrivers are crucial to interact with the web elements on a page for automated web testing with Selenium C#. You can download the Selenium WebDriver for browsers such as Opera, Firefox, Chrome, Internet Explorer, Microsoft Edge, etc. using the following links:

BROWSER	DOWNLOAD LOCATION
Opera	https://github.com/operasoftware/operachromiumdriver/releases
Firefox	https://github.com/mozilla/geckodriver/releases
Chrome	http://chromedriver.chromium.org/downloads
Internet Explorer	https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver
Microsoft Edge	https://blogs.windows.com/msedgedev/2015/07/23/bringing-automated-testing-to-microsoft-edge-through-webdriver/

Since I’ll be using Chrome, I’ll download the Selenium WebDriver for Chrome i.e. ChromeDriver. Though the downloaded ChromeDriver can be placed in any directory, it is a good practice to install the ChromeDriver in the location where Chrome browser (i.e. Chrome.exe) is present.

The advantage of following this practice is that you do not need to specify the path where the ChromeDriver is present while invoking the WebDriver.

How To Run MSTest Scripts With Selenium?

For demonstrating the usage of Selenium WebDriver with MSTest, I’ll use the following Selenium scenario for this MSTest tutorial:

Navigate to the URL https://lambdatest.github.io/sample-todo-app/
Select the first two checkboxes
Send ‘Adding item to the list’ to the textbox with id = sampletodotext
Click the Add Button and verify whether the text has been added or not

Take this certification to master the fundamentals of Selenium automation testing with C# and prove your credibility as a tester.

Here’s a short glimpse of the Selenium C# 101 certification from LambdaTest:

Get started with this complete Selenium automation testing tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing.

Implementation Of The MSTest Script

#Run first MStest script for Selenium test automation 
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;

namespace MS_Test_Cross_Browser
{
    [TestClass]
    public class MS_Test_Cross_Browser_Test
    {
        String test_url = "https://lambdatest.github.io/sample-todo-app/";
        String itemName = "Yey, Let's add it to list";

        [TestMethod]
        public void NavigateToDoApp()
        {
            IWebDriver driver;

            // Local Selenium WebDriver
            driver = new ChromeDriver();
            driver.Manage().Window.Maximize();

            driver.Navigate().GoToUrl(test_url);

            driver.Manage().Window.Maximize();

            // Click on First Check box
            IWebElement firstCheckBox = driver.FindElement(By.Name("li1"));
            firstCheckBox.Click();

            // Click on Second Check box
            IWebElement secondCheckBox = driver.FindElement(By.Name("li2"));
            secondCheckBox.Click();

            // Enter Item name
            IWebElement textfield = driver.FindElement(By.Id("sampletodotext"));
            textfield.SendKeys(itemName);

            // Click on Add button
            IWebElement addButton = driver.FindElement(By.Id("addbutton"));
            addButton.Click();

            // Verified Added Item name
            IWebElement itemtext = driver.FindElement(By.XPath("/html/body/div/div/div/ul/li[6]/span"));
            String getText = itemtext.Text;
            Assert.IsTrue(itemName.Contains(getText));

            /* Perform wait to check the output in this MSTest tutorial for Selenium */
            //System.Threading.Thread.Sleep(4000);

            Console.WriteLine("LT_ToDo_Test Passed");

            driver.Quit();
        }
    }
}

Code WalkThrough

*Step 1 *— All the necessary packages are included in the beginning of the code. In this MSTest tutorial for Selenium; the following packages are included for automated web testing with Selenium C#:

MSTest framework (Microsoft.VisualStudio.TestTools.UnitTesting)
Selenium (OpenQA.Selenium)
Chrome WebDriver (OpenQA.Selenium.Chrome)

using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
……………………………………………………………………………..
……………………………………………………………………………..

*Step 2 *— The [TestClass] attribute in MSTest represents the class containing the unit tests. In this example, MS_Test_Cross_Browser_Test() is the class containing all the tests.

namespace MS_Test_Cross_Browser
{
    [TestClass]
    public class MS_Test_Cross_Browser_Test
    {

*Step 3 *— The [TestMethod] attribute in MSTest indicates a method that contains the test method. In this example, the test method is NavigateToDoApp() and the same is under the [TestMethod] attribute.

[TestMethod]
public void NavigateToDoApp()
{

*Step 4 *— The IWebDriver interface is used for enabling the browser interactions. Hence, we create an instance of the IWebDriver interface in the code. A new instance of Chrome browser is initiated using the command driver = new ChromeDriver().

The URL is set to https://lambdatest.github.io/sample-todo-app/ and the browser window is maximized using the command driver.Manage().Window.Maximize() for this MSTest tutorial for automated web testing with Selenium C#.

public void NavigateToDoApp()
{
 IWebDriver driver;

 // Local Selenium WebDriver
 driver = new ChromeDriver();
 driver.Manage().Window.Maximize();

 driver.Navigate().GoToUrl(test_url);

 driver.Manage().Window.Maximize();

*Step 4 *— Once the Chrome browser is initiated and the target URL is loaded, we locate the required elements on the web page for automated web testing with Selenium C#. The details of the required Web Elements are obtained using the Inspect Tool in the Chrome Browser. As seen in the screenshot below for cross browser testing, the element with Name “li1” is located using the tool.

[TestMethod]
public void NavigateToDoApp()
{
 IWebDriver driver;

 ...............................................................
 ...............................................................
 ...............................................................

 // Click on First Check box
 IWebElement firstCheckBox = driver.FindElement(By.Name("li1"));
 firstCheckBox.Click();

 // Click on Second Check box
 IWebElement secondCheckBox = driver.FindElement(By.Name("li2"));
 secondCheckBox.Click();

 // Enter Item name
 IWebElement textfield = driver.FindElement(By.Id("sampletodotext"));
 textfield.SendKeys(itemName);
 ...............................................................
 ...............................................................
 ...............................................................
}

The same approach is followed for locating the other web elements having Name — li2, li3. The other elements are located using the Id of those elements.

The FindElement command in Selenium is used along with the appropriate web locators to identify the web element. Once the web element is identified (or located), appropriate action i.e. Click, SendKeys, etc. is performed on the web element.

// Click on Second Check box
IWebElement secondCheckBox = driver.FindElement(By.Name("li2"));
secondCheckBox.Click();

// Enter Item name
IWebElement textfield = driver.FindElement(By.Id("sampletodotext"));
textfield.SendKeys(itemName);

*Step 5 *— A new item (Yey, Let’s add it to list) is added to the list. An assert is raised if the text in the newly added element does not match with the expected text.

The Quit WebDriver command (driver.Quit) is called once the test is complete so that the WebDriver session is closed properly and resources used by the WebDriver are freed in this MSTest tutorial for Selenium automation.

// Click on Second Check box

IWebElement secondCheckBox = driver.FindElement(By.Name("li2"));

secondCheckBox.Click();

// Enter Item name

IWebElement textfield = driver.FindElement(By.Id("sampletodotext"));

textfield.SendKeys(itemName);

Executing The MSTest Script

To execute the newly created test (NavigateToDoApp), go to Test and press Run All Tests.

The execution progress can be seen in the Test Explorer window which can be seen by going to menu-item View -> Test Explorer.

Shown below is an execution snapshot from Visual Studio. The Green tick mark indicates that the test execution completed successfully.

Shown below is the automated browser testing execution in action in the Chrome web browser:

This MSTest Tutorial for beginners and professionals will help you learn how to use MSTest framework with Selenium C# for performing Selenium automation testing.

A comprehensive end to end testing tutorial that covers what E2E Testing is, its importance, benefits, and how to perform it with real-time examples.

All In All

In this MSTest tutorial for Selenium, I took a deep-dive into automated web testing with Selenium C# using the MSTest framework to run your first MSTest Script for Selenium test automation. Interactions with the elements on the web-page were performed by using the relevant Selenium APIs. The code implementation used in this article can be scaled to execute complex Selenium test automation scenarios using Selenium C# with the MSTest framework.

This concludes this MSTest tutorial for Selenium to run your first MSTest script for Selenium test automation. I hope you found this article informative! We’ve also covered a whole series on Selenium C# tutorial, you can check it out to know more about automated browser testing using Selenium C#. Do share this article with your peers and colleagues looking to learn about Selenium test automation using MSTest. A retweet and share on LinkedIn is always welcome with open arms. That’s all for now. Happy Testing!!!