How to perform test automation on Websites

Start testing websites on four different desktop browsers within a couple of minutes.

What is needed to start testing websites

Suitest account

Suitest account - login or register.

SuitestDrive

SuitestDrive control unit:

  • Download - from your preferences control units.
  • Install - unzip into a directory of your choice. (For automatic updates Java is required)
  • Pair - on first startup pair to personal account or organization.

Browser preparation

  • Google Chrome - download and install
  • Mozilla Firefox - download and install
  • Microsoft Edge - installed if on Windows 10 operating system (update through Windows Update if needed)
  • Safari - download and install

Browser setup

Set up the browser of your choice, by adding it to Suitest.

  1. Go to the device page

  2. Click Add device button

  3. Choose to Add browser or simulator

  4. Select the SuitestDrive on given computer, the browser that you want to test on and name it

  5. After pressing Next the device will be added to your Suitest organization.

Feel free to check configuring browsers for more information.

App set up and settings

Once the browser is added to your organization, it is time to configure the application.

See adding app configuration.

For the case of quick test creation, on the App platform tab:

  • Select App configuration method: Use Suitestify to inject the library automatically

  • Add Suitestify domain: file.suite.st

On the App settings tab:

  • Use the URL of our WatchMe app - https://watchme.suite.st/

Connecting to a browser

Keep the SuitestDrive running in the background, and in the Suitest web app connect to the browser you have just added.

Test scenario

In this quick start, we will be testing if the video playback in WatchMe app works.

1. Open WatchMe app
2. Check that the app has loaded
3. Open the first video
4. Wait for video to start playing
5. Stop the video and check that the player reacted properly
5. Continue playing the video until it reaches 5s
6. Go back to the main screen

Element repository

Switch to the Element repository, make sure that the right configuration is selected and click open app.

Now, in order to test identifying the elements, feel free to use one of the following approaches:

Define an element with mouse selection

In order to use the mouse selection area, you need to have the browser window visible as well. When you move the mouse cursor inside the selection area, you will see a cursor moving inside the browser on a position that corresponds the position of your actual cursor inside the selection area. Click on an element - let's say WatchMe logo.

Once the element is selected, you will see it marked by a blue square inside the browser and also marked inside the Page structure of the app in Suitest.

Then just name in the form on the right and click Save. Now the element becomes available in the Test editor.

Define an element using properties

If you have the information about element identifiers, it may be easier to enter those directly. For that, just switch to the Search by property tab and define e.g. CSS selector [data-testid="logo"] or Attribute data-testid = "logo" for the WatchMe logo.

Once the element is selected, you will see it marked by a blue square inside the browser and also marked inside the Page structure of the app in Suitest.

Then just name in the form on the right and click Save. Now the element becomes available in the Test editor.

Test creation

Before proceeding to the test creation, please store also an element with data-testid="container-video1" and store it as video container.

Thinking of the test scenario we are given, we need to use the correct test operations and assertions on the elements to check the expected functionality.

Switch to the Test editor and create a new test.

Create new test

The editor automatically adds the Open app line.

Defining test steps

In this scenario we will use the assertion, press, click on and sleep test operations.

Let's now go back to the test scenario:

  1. Open WatchMe app
  2. Check that the app has loaded
  3. Open the first video
  4. Wait for video to start playing
  5. Stop the video and check that the player reacted properly
  6. Continue playing the video until it reaches 5 seconds
  7. Go back to the main screen

Step 1 - Open WatchMe app

As already mentioned above, the Open app line is added automatically.

Step 2 - Check that the app has loaded

For the purpose of this demonstration, it is enough to check that the app logo and first video tile are loaded. Click Add line button as select Assert. Select element as a subject and logo from the list of elements.

Repeat it also for the video container.

Step 3 - Open the first video

Add another line, this time select Click on as a line type instead. Keep the element as a subject and select video container element.

Now, you should check that the test is correct so far and actually opens given video. In the top banner, click Run test. The test will execute and in your browser you should see WatchMe app being reopened and video executed.

Step 4 - Wait for video to start playing

Add Assert line, select Video subject, keep has properties evaluation and specify the following properties using + button (click on 3-dots for properties specification):

  • Video state = playing

  • Video position > 1s

Step 5 - Stop the video and check that the player reacted properly

Stopping a video is as simple as hitting the Enter key on the keyboard. Suitest allows you to send a sequence of key presses using a Send text test line.

Add Send text line and select the Enter key using the + button or fill-in [[ENTER]] value directly into the input field.

Add Sleep test line in order to visually be able to see that the playback actually stopped before proceeding further (when automating the execution, this line can be removed).

Add another Assert line with Video subject. Check just the Video status = stopped property.

Step 6 - Continue playing the video until it reaches 5 seconds

Add another Send text line with Enter key press in order to restart the video playback.

Add an Assert line with Video subject again. This time evaluate if:

  • Video is playing again: Video status = playing

  • Video played for at least 5 seconds: the Video position > 5s property.

Make sure that the value of timeout is high enough to be able to meet the conditions. If you are waiting for video to play at least another 4 seconds before meeting them, you should set the timeout at least equal, or better higher that that.

Step 7 - Go back to the main screen

Sending a Back space key press will do the job for getting back to the main screen. Then you can assert again on the app logo in order to validate that you got back there.

Test execution

Now that you completed the test creation, you can run it in your browser. Just click on Run test button in the top banner and follow the execution.

Complete test case