Web Testing Tutorial

What You'll Learn

In this tutorial we'll cover the basic concepts and tasks for web testing with Gondola.

Before You Begin

• This tutorial expands on the "mini" tutorial Creating and Running Your First Test. Please complete that tutorial first.
• Install POM Builder. To be sure the installation is complete, restart Chrome upon installation. You should see an icon for Pom Builder in right hand corner of the tool bar.
• Throughout this tutorial, we will be testing the Demo Shop web app.
• The purpose of this tutorial is to quickly familiarize yourself with Gondola's tools and concepts. In the next tutorial we'll cover more advanced techniques that will allow you to better organize your project and more easily maintain your test scripts.

Let's get started!

Create 'Home Page UI' Test Module

In this test module we'll write a few test cases to check some UI interactions on a home page:

In src/test, create the file home_page_test.ts and enter the following:

import { gondola, TestCase, TestModule } from "gondolajs"

TestModule("Home Page UI");

Test Case 1

In this test case we will check whether the heading of the page's banner is displayed correctly when we click on a menu item. Steps:

• Click on the Sale link
• Check if the banner heading says "Sale"
• Repeat with the links to the Women's and Men's pages.

Create the test case

Let's create our test case. The first step is to navigate to the site's home page. Enter the following in home_page_test.ts:

TestCase("Banner heading is displayed correctly ", () => {
  gondola.navigate("https://demo.gondolatest.com");
});

Using POM Builder to Identify Element Selectors

Now we need to click on the Sale link. To do that, we can use the built-in action gondola.click(locator). In order to identify a reliable locator for the Sale link, we'll use POM Builder:

As you can see, POM Builder suggests anxpath be used in this case. Copy the value and use as the locator. Our test case should now look like this:

 TestCase("Banner heading is displayed correctly ", () => {
    gondola.navigate("https://demo.gondolatest.com");
    //Sale link
    gondola.click({xpath: "//a[.='Sale']"});
});

Check the Text Value of the Banner

Gondola has many built-in actions for checking values. In this case, let's use gondola.checkText(locator, expectedValue).

To get the locator of the banner's heading, we can use POM Builder as we did previously:

This time POM Builder suggests css as the locator type and it points to the h1 element. Copy the value and use it as the locator. Our test case now should look like this:

TestCase("Banner heading is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    //Sale link
    gondola.click({ xpath: "//a[.='Sale']" });
    gondola.checkText({ css: "h1" }, "Sale");
});

Practice

Repeat steps above to click on other links (Women's and Men's) and check their corresponding banners' headings.

In case 😉 you were wondering, here is the full test case:

TestCase("Banner heading is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    //Sale link
    gondola.click({ xpath: "//a[.='Sale']" });
    gondola.checkText({ css: "h1" }, "Sale");
    //Women's link
    gondola.click({ xpath: '//a[.="Women\'s"]' });
    gondola.checkText({ css: "h1" }, "Women's");
    //Men's link
    gondola.click({ xpath: '//a[.="Men\'s"]' });
    gondola.checkText({ css: "h1" }, "Men's");
});

Test Case 2

• In this test case, we will check whether the Highest Price is displayed correctly (we expect it to be $150):

• Repeating what we've previously learned, the test case should look like this:

TestCase("Highest Price is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    //[CHECK] The highest price should be 150 (This is a bug)
    gondola.checkText({xpath: "//span[.='$300']"}, "150");
});

A Potential Issue When Identifying Dynamic Elements

In a real world scenarios, the xpath selector //span[.='$300'] would not be ideal. The text value $300 is used to identify the element instead of a static id. The text value of the Highest Price is supposed to be dynamic, so we wouldn't be able to identify it if its value changed.

However, for the purpose this tutorial, we'll accept this issue and discuss the solution later. For more on choosing the best locator, we recommend this article

• Now execute the tests and observe the results. Gondola automatically captures the screenshot when a test case is failed:

Playing Around With Test Execution

Open gondola.json. It's located in the project root.

Running tests with a different browser

Change the browser from chrome to firefox then execute the test:

{
    "helpers": {

        "WebDriver": {

            "browser": "firefox",

        }
    }
}

Running tests using multiple browsers

• In order to execute test using multiple browsers, we need to start a standalone Selenium server by running the command below.

npm run start-seleniumserver

• We've configured the multiple setting in gondola.json so that the test will run on multiple browsers simultaneously.

{

    "multiple": {
        "parallel": {
            "browsers": [
                "chrome",
                "firefox"
            ]
        }
    }

}

• In the example above, we defined a test suite named parallel. Chrome and Firefox will be launched at the same time when we execute this suite:

npm run parallel

• After the tests have finished, the results for each of the browsers will be displayed separately.

TIP

More on running multiple web-tests can be found here
More information about test execution can be found here

Note

The number of concurrent tests you can run is the based on the number of agents you've purchased.

A better locator

In the section Test Case 2 we mentioned that our locator wasn't that great. What would be a better one? In this case we would use a css locator css: "label[for='pricerange'] > span". The span that holds the Highest Price doesn't have a non dynamic unique id, but the <label> tag that's its parent does. That allows us to identify the child <span> tag that contains the Highest Price. Another solution would be to ask the development team to add a static unique id to the <span> containing the Highest Price.