cypress-adc

A starter kit for testing microsites and static projects. It uses Cypress.

Cypress is a tool for front end testing. It replicates user interaction. Anything that happens on the browser (HTML, CSS, Javascript) can be tested with Cypress.

Cypress provides a free, open source, locally installed Test Runner.

Check the repo here:

Check the npm here:

Getting Started

• Install cypress-adc on the root directory with npm i cypress-adc

• You will see these new folders and files appear:

• When you are ready to test your code locally, go to cypress/integration/static.spec.js and write your tests there. You will see basic tests already written:

1. Accessibility.

2. Missing alt tags for images.

3. Performance measure with Lighthouse.

4. Proper metadata.

• Cypress is a testing framework specialized in end to end testing. For this kind of testing, a local server is needed. You must serve your site/start your app FIRST and then begin testing. cypress-adc comes with a default server http-server.

• To serve your site using http-server, run this command in your terminal npx http-server. Now you can visit http://localhost:8080 to view your site.

• If you are using webpack, gulp, etc, to serve your site, simply update the port number on base url in cypress.json:

• Open another terminal and run npx cypress open to open Cypress Test Runner.

• When you are ready to commit and push changes to Github, our Github Action (which can be found on github/workflows/main.yml) will run Cypress tests on every push.

• You can go to https://github.com/adcetera/<your-repo-name-here>/actions and see if all tests passed.

Things to know

• If you want screenshot and videos of your tests, run npx http-server first and then run npx cypress run. Video and screenshots will appear in your cypress folder:

• It is best practice to use one terminal for the local server and another terminal for cypress testing. If you try running server and cypress in one terminal, you may lose context of the server and will not be able to terminate it after testing is done.

• Lighthouse automatically opens and closes another browser tab when running performance test.