WEB AUTOMATION - Lesson 7: Mobile Web

Watch this video to learn how to automate mobile websites and applications.

In this video

  • Select mobile phone
  • Design mobile automation case
  • Design locally – run cases in the cloud

Go to next video

Overview

Watch this video to learn how to automate mobile websites and applications.

In this video

  • Select mobile phone
  • Design mobile automation case
  • Design locally – run cases in the cloud

Go to next video

In this video we will take a look at how you can automate the testing of your mobile web site using Leaptest.

If you are not familiar with Leaptest already, I will encourage you to watch the “Introduction to web automation” video found the Learning center, before watching this video.

Lots of companies has realized that the cost of maintaining both native mobile apps on various platforms and a web site on top is quite high, because of the need for different technical competences for each type of device. Because of this, the mobile web sites has become increasingly popular.

Whether it’s a web site that is using a responsive pattern to handle all devices and screen sizes or it is a web site created only for mobile devices – some even wrapped into native apps – you can use Leaptest to help you test the mobile web site.

Automating a test for a mobile web site is just as easy as automating any test case for a web site in Leaptest. Leaptest uses the mobile emulators in Chrome while designing the test case, and it’s possible to run the test case either in the browser emulator, on BrowserStack or Sauce Labs or by using a Selenium grid.

In this video I’ll show you how to create a simple case for a mobile web site and how to execute it both in the browser and on BrowserStack.

We’ll start by adding a Start Web Browser block and keep Chrome as the browser. Leaptest will support Firefox and Edge to host the emulators as well.

We specify amazon.com as the URL, and when we expand the Start Web Browser block we can now select which Device Type to use for the test case. The default value is “desktop” which is just a normal web automation running in the browser. We select the Apple iPhone 7 from the list and is now ready to add the next building block.

On amazon.com I’ll like to perform a search and ensure that the number results is above a given value, so I’ll start by adding a Click Web Element to set focus in the search field on the web site. As with a normal web automation case I’ll click “Select Web Element to click” which opens up a Chrome browser. The new thing to notice here is that the web site is now shown as if it was accessed on the mobile phone we selected in the list – in this case an Apple iPhone 7. Leaptest is behaving exactly like a browser on a mobile phone so the result we can see in the browser is the same we will see if we used a mobile phone.

To select the element to click on, I use the cross hair as in any Leaptest automation case. I then add a Type Web Text block and enter the value “star wars lego” followed by an ENTER to start the search.

I’ll just run the last 2 building blocks by selecting “Run case from here”.

We can now see the result of the search, and I’ll use a Get Web Number to read the number of results – in this case 3000 – and compare it to 2500. So if the number of results is higher than 2500 we will pass the case.

Let’s run the case from the start!

And the case passed – not really a surprise but a good example of a mobile web case.

Let’s try to select another phone and run it again. We can see the same web site but with a slight change in proportions. Again it passed, so it seems amazons web site handles both iPhones and Samsung phones well.

As mentioned earlier you can either run your mobile web cases locally in a browser but you can also choose to run them on Sauce Lab, BrowserStack or in a Selenium Grid if you want to. You simply define an Environment containing all the needed information to run the automation case. What type of environment, what browser to use, the screen resolution etc. You can find much more information about setting up environments in the Learning Center on Leaptest.com.

As a final node, I’d like to run the test case we just created on BrowserStack. I have created an environment – named ‘BrowserStack Apple iPhone 7’ – where I selected the environment type “BrowserStack” and Apple iPhone 7 as the device type. I can use the environment directly from the design canvas, and when I hit the play button, we can see the case run in the video area.

And again the case passed – now running in a cloud based environment.

Thank you.