UI Testing

Objectives

Front-end testing ensures our web-application functions as expected as well as performs at a reasonable speed. Whenever a user clicks on a button or goes to a page, it's important that a seamless integration and communication between the front-end and the server takes place. For front-end testing, we aim to write fast, reliable and automated test scripts. This grants an effortless and predictable quality assurance process for our client side.

Cypress

Cypress is a front-end testing tool that we utilize for this project. It's a better alternative to Selenium in our view. Installing and configuring for Cypress is very simple. Cypress syntax and provided tools are developer-friendly and comprehensively documented. Furthermore, Cypress allows time travel during debugging, which is very useful for developers to find defects.

For more information, visit Cypress link: https://www.cypress.io/

Testing strategy

Our team aims to test the most critical features or functions such as login, sign up, job search, etc. We group related test scripts inside a Cypress test file. For example, test scripts on job searching with zip code and job searching with skills will be put in jobSearchTest.js file. The naming of our test file should match the name of the pages or components being tested on. We mock api calls and stub responses or errors in order to guarantee that everything works or fails as we expect. We also put assertions on the content of the page after a critical feature or function is executed. For instance, we want to make sure the user is redirected to the login page after successfully signing up by asserting the login title does appear on the page.

Commands

"Commands" allows us to write reusable test scripts. Common functions that are required for many features such as authentication will be put in the commands.js file. We could call these test scripts whenever needed within test scripts of other features. Overall, "commands" helps us mitigate code duplication, code complexity and improve code organization.

Environment variables

We separate the front-end and server URLs in order to avoid mixing up domains in the api calls and the website URL, which could cause our integration tests to production server fails. The environment variables could be configured in the cypress.json file.

• Front-end: http://localhost:3000
• Server: http://localhost:9000

Test points

So far, we have tested these pages:

• Login
• Sign up
• View profile
• Edit profile
• Job search
• Job posting