.svg "Leapwork")
Welcome to lesson seven on automating the testing of your mobile website using Leapwork.
In this video, we will explore how Leapwork can assist you in testing your mobile website efficiently.
If you're new to Leapwork, I recommend watching the "Introduction to web automation" video available in the Learning Center before proceeding with this tutorial.
Many companies have realized that maintaining both native mobile apps for different platforms and a website can be costly due to the need for diverse technical expertise for each device type. Consequently, mobile websites have gained popularity.
Whether your website uses a responsive pattern to cater to various devices and screen sizes or it is exclusively designed for mobile devices, including those wrapped into native apps, Leapwork can help you automate the testing of your mobile website.
Automating a test for a mobile website is as simple as automating any other test case in Leapwork. Leapwork utilizes the mobile emulators in Chrome while designing the test case, and you can choose to run the test case either in the browser emulator, on BrowserStack or Sauce Labs, or by employing a Selenium grid.
In this video, I will demonstrate how to create a basic test case for a mobile website and execute it both in the browser and on BrowserStack.
Let's begin by adding a "Start Web Browser" block and selecting Chrome as the browser. Leapwork also supports Edge to host the emulators.
Next, we specify "amazon.com" as the URL.
Upon expanding the "Start Web Browser" block, you should be able to see various available options like Windows mode, Device type Binary locations, etc. Leapwork uses the “Device Type” field to define the type of device or platform users want to run automation on, as most tests are executed on a desktop the default option is set to “Desktop”.
Clicking on the “Device type” dropdown will display all available Devices Leapwork supports for automation.
Don’t worry if you can’t find your device in the list, the last option “Other” in the dropdown will allow you to create your own device using the Width, height, Pixel rate, and User agent string of your device.
For this lesson, we will select the “Apple iPhone 7” in the Device type.
Let's run the flow by clicking the run button.
The noteworthy aspect here is that the website is displayed as if accessed on the selected mobile phone, in this case, an Apple iPhone 7. Leapwork simulates the behavior of a browser on a mobile phone, providing us with the same view as we would see on an actual mobile device.
Let’s try to understand the use case that we are going to create in this lesson. We will open amazon.com on a mobile web view, then perform a search and verify that the number of results exceeds a specific value.
Now let’s go back to Leapwork and try to achieve the use case.
Start by dragging the green connector from the start web browser block to start the recording. Hover your crosshair above the search text box on the web page and click to capture it,
as we want to type in the search box, we will select the "Type Web Text" method from the options then we will enter the value "lego" into the text value, click apply button will enter the text in the search box in amazon.com.
Now let’s capture the Search icon select click the web element action and then apply.
Capture, Filters, select click the web element action and then apply.
We can now observe the search results at the bottom shown in the format “Show ‘the number of’ results”.
Capture the search result using the "Get Web Number" block to retrieve the number and click apply button.
Let’s stop the recording by clicking the Save and Close Recorder button and go back to Leapwork Canvas.
The last thing we want to do is a comparison, to do that I will manually add Compare block by dragging the connector from the “Get web number” and search Compare block.
Let’s compare the value coming from the web page with the static value of 2500. To achieve that Drag the connector from the “Number found” blue data connector of the “Get web number” Block to Value A of Compare block.
Enter value 2500 in Value B of Compare block, expand the block,
and set the Comparison method as "Greater than", make sure that the Comparison type field is set to “As value A” so that if the results are greater than 2500, the test case will pass Else it failed.
Let's run the entire test case from the beginning!
As expected, the test case passed. It serves as a good example of a mobile web case.
Now, let's select a different phone and run the test case again. We can see the same website but with slight changes in proportions. Once again, the test case passed, indicating that amazon.com handles both iPhones and Samsung phones effectively.
As mentioned earlier, you have the option to run your mobile web cases locally in a browser or choose to run them on platforms such as Sauce Labs, BrowserStack, or a Selenium Grid.
Mobile web testing using a web browser offers several benefits:
Flow Reusability: If your web application is responsive and works well across multiple devices and screen sizes, you can reuse your existing test scripts for mobile web testing. This allows you to leverage the same set of test cases for both desktop and mobile platforms, reducing duplication of effort.
Cross-Platform Testing: By using the Leapwork web emulator, you can easily perform cross-platform testing by running your tests on different mobile devices to ensure consistent behavior across devices.
Familiarity and Learning Curve: If you are already familiar with Leapwork web automation testing, using it for mobile web testing allows you to leverage your existing skills and knowledge.
Testing on several Devices: It is expensive and difficult to have many mobile devices and their maintenance, Leapwork mobile emulation provide a sustainable alternative to solve the difficult and expansive mobile automation.
We hope this tutorial provided you with valuable insights into automating the testing of your mobile website using Leapwork. Remember, Leapwork offers a range of possibilities to optimize your testing processes, whether locally or in the cloud.
We suggest you try replicating this flow on your own by following the video.
Happy Automation!