Interacting with a web user interface

Common web user interface interactions include selecting items from dropdown lists, clicking elements like buttons and icons, filling in and submitting forms, and validating that elements contain specific text or are visible to the visitor.

Filling input boxes and clicking elements

Good practice is to add the data-testid attribute with a unique value to identify elements on a page that will participate in UI tests.

The Northwind MVC website home page shows a visitor count, and it allows the visitor to filter the products by entering a number and clicking a button. Let's use the GetByTestId method in Table 7.3 to automate this. We will start by adding a data-testid attribute to the elements we want to locate:

1. In the Northwind.Mvc project, in the Views\Home folder, in Index.cshtml, wrap the visitor count in a <span> element with a unique attribute, as shown in the following markup:

We have had <span data-testid="visitor_count...