Kata E2E UUV

Version Française

Goal

The purpose of this kata is, through a few exercises, to practice writing end-to-end (E2E) tests with the UUV tool.

The web application for which we are to write E2E tests is Weather App.

It's a simple application that displays the weather for a few towns.

Set up your environment

You can either open a codespace from this repository or perform the following actions if you are developing from your local environment:

1. Clone this Git repository in a directory we'll call KATA_HOME
2. Install autocompletion in the IDE (if intelliJ, do not run as administrator)
3. Open project in IDE
4. Then execute from a terminal :

   npm install

5. Run the first-test.feature test :
   • From Intellij: Run the UUV task "open" (if you have rights problems, check the Use local npm script ckeckbox)
   • From a terminal :

     npx uuv open

6. You're ready to work out

Exercises

0. Hello World : Correct the test to make it successful

1. Homepage : Check that the following elements are visible on the home page:

   • a title Welcome to Weather App
   • a button Get started
     See Solution

2. Weather : Check that from the home page, when you click on Get started, the following elements are visible:

   • a text Nothing to display
   • The list of towns in the left panel ['Douala', 'Tunis', 'Limoges']
     See Solution

3. TownSelection : Check that from the page with url https://e2e-test-quest.github.io/weather-app/?isStarted=true, when select the city Douala, the following elements are visible in the details section :

   • a title Douala
   • a text min: 10.8 °c
     See Solution

4. Filter : Check that from the page with url https://e2e-test-quest.github.io/weather-app/?isStarted=true, when enter the text i in the search field and click on the search button, the towns available are : ['Tunis', 'Limoges']
   See Solution

5. Keyboard Navigation : Check that from the page with url https://e2e-test-quest.github.io/weather-app/, when start the keyboard navigation from the top of the page, then you see the following items focused during navigation :

   • a link Weather App's Logo
   • a link Home
   • a button Get started
     See Solution

6. To go further : You can also :

   • Make accessibility checks: Consult this page for more information
   • Check that you have respected the recommendations of accessibility-based sentences
   • Mock the https://e2e-test-quest.github.io/weather-app/assets/data/mock.json url call to change the list of available towns
   • Test Add new town feature (form filling using mouse and keyboard)
   • Running tests on an iPad mini
   • Create a custom sentence to check available towns
     See Solution

Helpful links

• How to write good E2E Tests ?
• Sentence dictionary
• Click action
• sentences by role
• Create custom sentence