02 Web Test Automation Simplified
Three simple exercises to under the three core technologies behind a web page: HTML, JavaScript, and CSS.
Learning Objectives
To understand
the basic web terms.
a web page’s content (HTML) and Style (CSS)
JavaScript adds dynamic to a web page
Web Basics
Here is a simple web page in a Chrome browser window.
All terms except one shall make sense to everyone. A Uniform Resource Locator (URL) is an official term for a web address.
Web Testing means …
Verify business features on a website. A test case verifies a business feature (from GUI) that involves one or more web pages.
Think about the steps for a user login test. (you know it)
Web Test Automation means …
Test Automation means automated scripts, not human beings, execute testing. Web Test Automation: use automated test scripts to drive controls in the browser(e.g. Chrome) to perform testing.
See #01 Hello Web Test Automation for an automated test execution demo.
Manual testers will be happy to know the test design for manual testing applies to test automation. You just need to “translate” the manual steps into automated ones. Of course, there will be some differences, usually with boosted power via automation. At the test design level, there are minor differences between manual testing and web test automation.
For example, below are manual test steps for a user login test.
visit the test server https://whenwise.agileway.net
click "SIGN IN" link on the top navigation bar
enter email "james@client.com"
enter password "test01"
click the "SIGN IN" button
wait a few seconds and expect the text "You have signed in successfully"An equivalent raw Selenium WebDriver version:
driver.get "https://whenwise.agileway.net"
driver.find_element(:link, "SIGN IN").click
driver.find_element(:id, "email").send_keys("james@client.com")
driver.find_element(:name, "session[password]").send_keys("test01")
driver.find_element(:id, "login-btn").click
sleep 3
expect(page_text).to include("You have signed in successfully")Or a refactored version based on Maintainable Automated Test Design.
driver.get "https://whenwise.agileway.net"
click_nav_sign_in
login_page = LoginPage.new(driver)
login_page.enter_email "james@client.com"
login_page.enter_password "test01"
login_page.click_sign_in
try_for(3) {
expect(page_text).to include("You have signed in successfully")
}New-to-Selenium readers don’t worry about trying to understand every statement there, just to get an idea of automated test scripts that match the test design. By the way, you will learn to write this test, from scratch, in Session #04 (raw selenium version, the refactored version will be on #17), no prior experiences are required at all.
I want to just highlight one difference here. In automated scripts, we must provide every step with specifics, which is easy to understand. For example, “a few seconds” can be 3, 4, 5, or even 8. But in automated test script, we must set a specific number, in this case, 3 seconds.
How to Find an Element
Right-click a control (a.k.a. element) in the Chrome browser and select “Inspect”.
The browser window will show a panel (on the right). The text (as shown on the right in the above image) is the source of the web page, known as “Page Source”. A web page source is in Hyper Text Markup Language (HTML).
Behind a web page is HTML
A web developer's main work is to create HTML pages, and web browsers (e.g. Chrome) render them to appear the way we see.
Tasks
Here are a few quick exercises to change a web page in your browser.
Don’t just read, do the exercises. The only practical way to master test automation is working on many hands-on exercises. — Zhimin Zhan
Task 1. Change Local Page Content (HTML)
Open https://games.agileway.net (a web address or URL) in Chrome.
By the way, https://games.agileway.net hosts a game created by my son (I helped) using JavaScript. Readers might know I am stronglyl against using JavaScript for test automation (check out article: Why JavaScript Is Not a Suitable Language for Real Web Test Automation?). See, I do know and use JavaScript when it is appropriate. My son wrote about 20 automated tests for this game, of course, in Selenium Ruby, the same style of automated test scripts I have been using since 2011. I call it “AgileWay Test Automation Formula”, by the way, the technogoies are 100% free and open.
Also, if like this game, please leave a note here, which I will tell my son to cheer him up.
Right-click the text ‘Liney’ and select ‘Inspect’. You can see the <h3> tag is highlighted in the right panel.
Double-click the text Liney in the right panel.
Change it to another word, such as “Mario”. You changed the name on the web page as below:
Don’t worry about it. You only changed the local web page in your browser. Refresh the page, and the original content will be back.
Task 2: Show/hide the Hints button (JavaScript)
JavaScript adds dynamic to web pages. Let’s do a quick exercise. There is a “Hints On” button on
https://games.agileway.net
.
Right-click anywhere on the page and select “Inspect”.
Click the ‘Console’ tab.
3. Try the following commands in the console one by one, followed by the “Enter” key.
$("#hints-btn").hide();
$("#hints-btn").show();Or toggle with a delay.
$(“#hints-btn”).toggle(2000);2000 means 2 seconds.
Task 3. Change the reload button style (CSS)
CSS (Cascading Style Sheets) adds styles to web pages. In this exercise, we will change the button’s style (background and forward) in your local version of the web page.
Inspect the reload button.
Right-click the button and select “Inspect” in Chrome.
2. Select the highlighted <button> tag, then click the Styles panel at the bottom.
A beginner might need to try a few times to get into editing mode (as below).
3. Enter a new style background-color: red .
4. Select <i> tag under the button', add style color: blue .
Please feel free to explore.
Summary
A web developer creates a web page in HTML
A UI designer adds style sheets (CSS)
A web developer makes it dynamic (JavaScript)
A Browser renders HTML, CSS, and JS to a web page we see (many controls)
Software testers execute tests to make sure web site works
Web Test Automation Engineers write scripts to drive controls in the browser to perform testing