So, now that we know all the theory behind the UI testing, we can create our first end-to-end test for our Pomodoro application. Let's define the steps that we will perform and the things that we should test. So, first of all, we should open the browser. Then, we should probably check that our container (that has the #app ID ) is on the page.
We can also try to check that the pause and stop buttons are disabled and that the sound toggle button does not exist on the page.
Then we can click on the start button and check that the sound toggle button has appeared, the start button has become disabled, and the pause and stop buttons have become enabled. There is an innumerous number of possibilities of further clicking and checking, but let's perform at least the described steps. Let's just write them in the form of bullet points:
- Open the browser at
http://localhost:8080. - Check that the
#appelement is on the page. - Check that the
.toggle-volumeicon...