Transaction Test Exercises

This demo application contains multiple exercises for Transaction tests

Exercise 1: Dynamic `id` attributes

In this exercise, you are tasked with clicking on an element that has a random `id` every time the page is loaded. How can you overcome this in your transaction script?

Click here to open the exercise. Your user journey is:

  1. Begin on the blog front page.
  2. Click on "Technology" in the top-level menu (in-between "U.S." and "Design").
  3. On the Technology page, click on the "Technology" header at the top of the screen (the large text directly above where it says "There are some very interesting things happening in the tech space today!").

After you finish recording this journey, play it back. Selenium will fail to click on the "Technology" link in step 2, and will present an error: NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="i12345"]"}.

How could you modify the script so that it clicks on the Technology menu link successfully, without using the `id` attribute since we cannot depend on it?

Exercise 2: Menu appears on hover

In this exercise, you are tasked with clicking on an element that only appears when the mouse has hovered over another element.

Click here to open the exercise. Your user journey is:

  1. Begin on the blog front page.
  2. Hover your mouse over "Travel" in the top-level menu (in-between "Health" and "Style").
  3. In the popup menu that appears, click on the "Domestic Travel" menu link.
  4. Click on any one of the "Continue Reading" links.

After you finish recording this journey, play it back. Selenium will fail to click on the "Domestic Travel" link in step 3, and will present an error: WebDriverError: element not interactable.

How would you fix your script to accommodate for the Domestic Travel menu link not being visible/interactable until the mouse hovers over the Travel menu item first? Take a look at the moveMouseIntoElement.js example from the transaction-scripting-examples repository.

Exercise 3: Interacting with iframes

In this exercise, you are tasked with clicking on an element that exists in an iframe. iframe elements allow one page to be embedded directly into another page. When interacting with iframes, you must switch the Selenium "context" so Selenium knows to search the DOM of the embedded page, not the parent page.

Click here to open the exercise. Your user journey is:

  1. Begin on the blog front page.
  2. Click on "Business" in the top-level menu (in-between "Culture" and "Politics").
  3. When the Business page has loaded, click on any one of the "Continue Reading" links.

After you finish recording this journey, play it back. Selenium may fail to click on the "Continue Reading" link inside of the iframe. If the test did not play back successfully, the Recorder IDE likely did not capture the context switch to the iframe element. If the test did play back successfully, you should see a line of code in the script: await driver.switchTo().frame(driver.findElement(By.css(`iframe`))). For an example of switching the context, look at the iframe.js example from the transaction-scripting-examples repository. Note that this example shows how to switch into an iframe context, and back to the main page context.

What if there were multiple iframes on the page? How would you select the appropriate one?

Exercise 4: Links that open in a new Tab

In this exercise, you are tasked with clicking on an element that opens a new browser tab, and then interacting with elements in that new tab.

Click here to open the exercise. Your user journey is:

  1. Begin on the blog front page.
  2. Click on "Culture" in the top-level menu (in-between "Design" and "Business"). A new browser tab will open.
  3. In the "Culture" page (the new tab), click on the blue "Click Here for More Culture" button.

After you finish recording this journey, play it back. Selenium will fail with an error: NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"[href="#culturebtn"]"}

This is because the Recorder IDE did not detect that we are working in a new tab. To switch the context of the window (tab) we're operating in, use the helper functions from the switchToNextTab.js example in the transaction-scripting-examples repository.