We are going to write e2e specs testing the UI from Displaying confirmation dialog with guarded routes of Chapter 9, Miscellaneous Use Cases and Best Practices. Just to recap: the first view has an input field (username) with a submit button. The button triggers a navigation to the second view. Whenever the user changes the username, a confirmation dialog with the text You have unsaved changes. Are you sure you want to leave this page? will appear. The user can click on Yes or No. We want to write five test cases that verify:
- Whether the first page has a proper title displayed within the h1 tag
- Whether the navigation happens when no input exists
- Whether a confirmation dialog gets displayed when an input exists
- Whether the user leaves the current view when clicking on Yes
- Whether the user stays on the current view when clicking on No
Before writing specs, we need a Page Object called FirstViewPage:
import {browser, element, by, ElementFinder} from &apos...
