Basic Web Page - Instructions

This is one of the simplest test practice automated execution pages on the site.

Page Fixed Text

There are two main fixed text elements in the form of paragraphs.

Locate these with classes, id or relative to parent divs.

The id’s are pretty simple:

  • para1
  • para2

You could search for these with a CSS Locator: #para

Synchronization

Synchronization might be required when automating the results of clicking the button, but the page itself requires no synchronization on loading.

Dev Tools

Use the dev tools to inspect and explore the page DOM.

Exercises

Technical Web Testing

  • Learn to use the Dev Tools on this page
    • Open Dev Tools by right click on an element and choose Inspect
    • Open Dev Tools Ctrl+Shift+I
  • Find the paragraphs using CSS Locator in the DOM Elements view
  • Click the button and watch the DOM to see how the text is made visible:
    • is it a style change display:block from display:none
    • or is the element always present, but text is added?
  • Change the id of the click-message paragraph and click the button?
    • Does the button still show the message?
    • Do you understand how the rendering of the message is implemented?

Automating

  • Open the page, locate the paragraphs and check the paragraph text
  • Open the page, locate and click the button, check for the resulting text
    • Note: depending on the tool used, this might require synchronisation because the text is added using JavaScript.

Overview Video