# 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 "@logigear/gondola"
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 ingondola.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.