End-to-End Tests

In this assignment, you will use Playwright to write end-to-end tests for a Roman numeral calculator application. Clone your GitHub Classroom repository for this assignment (available on Canvas) to get started.

Begin by installing the dependencies listed in package.json by running:

npm install

You’ll also need to install and set up Playwright.

Don’t forget to:

check the grading rubric in the Canvas assignment,
submit a link to your GitHub Classroom repository in the Canvas assignment, and
attend your assignment demo, which you should have already scheduled at this point.

This calculator functions like a standard pocket calculator, enabling you to perform simple arithmetic operations. However, unlike most calculators, this one displays numbers exclusively in Roman numerals (plus “0”).

The application itself is located in the calculator/ directory. Instructions for running it are included in the section below. I recommend starting by running the application and experimenting with it to familiarize yourself with its functionality:

npm run serve

You must use Playwright to test the application flows described below.

Simple Calculation and Conversion

Write a Playwright test that performs a basic calculation and verifies the accuracy of the results. This test should be conducted entirely on the app’s home page (i.e., the URL path /). This test should be performed before registering a user.

Calculation and Conversion to “modern” Roman

Write a Playwright test that performs a calculation in “old” Roman numeral mode (the default) and then clicks the “mdrn” button to convert to “modern” Roman numerals. This test will utilize the same web API that we used in assignment 3 to perform the conversion to “modern” Roman numerals. In an end-to-end test, we don’t want to mock this service as we did for our integration tests. This test should take place completely on the app’s home page (i.e., the URL path /).

User Registration

Write a Playwright test that starts on the app’s home page (i.e., the URL path /) and registers a new user by clicking on the “Register” link at the top of the app, typing a valid email address and password into the registration form, and then clicking the “Register” button. If registration is successful, the app will display a success message then automatically redirect you back to the app’s home page. In your test, assert that the success message appears and that the redirect takes place to verify that registration was successful.

Write a separate Playwright test that logs a user into the app. Because Playwright isolates tests by default, the user that was registered previously will no longer exist, so you’ll have to begin the test by registering a user, starting at the app’s home page (i.e., the URL path /). You do not have to make assertions to verify that registration succeeded in this test.

After the user is registered, proceed by clicking on the “Login” link at the top of the app, and then submitting the same credentials you provided during the registration step. If login is successful, the app will automatically redirect you back to the app’s home page, where the navigation bar should be updated to contain three links (“History”, “Logout”, and “Unregister”). In your test, assert that the redirect takes place and that the navbar is updated to verify that login was successful.

Calculation History

Write a separate Playwright test that verifies that a logged-in user’s calculation history is successfully recorded. Specifically, once a user is logged in, each calculation they make will be recorded every time they click the ”=” key, and that history can be viewed on the app’s “History” page.

Because Playwright isolates tests by default, the user that was previously registered and logged in will no longer exist, so you’ll have to begin the test by registering a user and then logging that user in, starting at the app’s home page (i.e., the URL path /). You do not have to make assertions to verify that registration or login succeeded in this test.

Then, verify that the user’s calculation history is correctly recorded by performing a few calculations (making sure to hit the ”=” key a few times) and then clicking the “History” link in the navbar. The test should make assertions on the “History” page to verify that the history displayed there correctly represents the calculations performed.

Logout

Write a separate Playwright test that verifies that a logged-in user can successfully logout. Because Playwright isolates tests by default, the user that was previously registered and logged in will no longer exist, so you’ll have to begin the test by registering a user and then logging that user in, starting at the app’s home page (i.e., the URL path /). You do not have to make assertions to verify that registration or login succeeded in this test.

Then, verify that the logout functionality works correctly by clicking the “Logout” link in the navbar. This will logout the user and the navigation bar should be updated to contain only the “Login” and “Register” links. Write assertions to verify that this happens correctly.

Test Requirements

The tests you write for this assignment should satisfy the following requirements:

As always, we want to avoid incorporating implementation details into our tests to the extent possible.
We want end-to-end tests to match a real execution environment as much as possible. For this reason, you should not use doubles in any of the tests for this assignment.
Your tests should assume the application server is already started. Make sure the server is running before starting your tests.