1copenut/cypress-test

Showcasing Cypress.io for accessibility testing. This includes automated checks, keyboard navigation, and whatever else I can make work.

cypress-test's Issues

Smoke test multiple pages for accessibility

https://timdeschryver.dev/blog/setting-up-cypress-with-axe-for-accessibility#automating-a-whole-website

Add complementary perf measures to your website

HTMHell has the goods: https://www.htmhell.dev/adventcalendar/2022/6/

Bump Cypress to version 13

Have a feeling this repo is a bit behind. The migration path is pretty straightforward.

Convert to TypeScript

The title says it all. TypeScript is the future.

Learn about the `CrUX History` API and tracking data over time

Chrome has a UX History API that can track data over time?!? https://calendar.perfplanet.com/2023/monitor-performance-using-google-sheets-and-crux-history-api/

Try out Rspec and Capybara for Ruby-based browser (BDD) testing

I've already cloned the TestWise example project and set up Rspec with latest Ruby. Need to take this into the mono-repo with my own tests and try them out.

Get a basic Express server running

We need a server to try out the Cypress e2e test suite. Probably a simple Express server and a few HTML files.

Add Lighthouse audits to the suite of tests we can run

• https://mfrachet.github.io/cypress-audit/

Migrate to version 10

It's time to migrate to Cypress version 10. It's pretty enhanced.

Check out Performance Day Online!

https://www.wearedevelopers.com/event/front-end-performance-day-june-2024

Refactor your Dockerfile using this article from Annie Sexton at Fly.io

https://fly.io/javascript-journal/demystify-docker-js/

Write docs for all the things this repo can do, and how to use them

Let's face it, I'm so busy writing features I don't write documentation. I know, it's bad form. That's why I'm writing this issue to write the docs. :)

Try out Cucumber for feature-driven BDD tests

I know folks aren't super thrilled with Cucumber (maybe they are) but I'd like to try it for myself as an extension of #33 since I already have latest Ruby running.

Add a Docker container for CI testing

The CI testing is best served in a batteries included Docker container. You know a little about this now, so let's add one.

Rename and repurpose this repo

There's this...rumor...that Cypress is in trouble. Maybe it is, maybe it isn't. Either way, it might be good to expand my horizons and try out other test runners for e2e (and integration?) testing.

This issue will be to rename the repo to something more descriptive like "e2e-test" or "e2e-learning". That seems in keeping with my personal naming convention.

Two tasks:

• Rename the repo
• Add a monorepo setup like Nx so I can have some standardization and try out different runners in isolation

Try out Cucumber for `BDD` style testing

• https://www.browserstack.com/guide/how-to-run-cypress-cucumber-test
• https://github.com/badeball/cypress-cucumber-preprocessor

[META] Performance testing extravaganza!

2024 will be the year of performance testing and instrumentation. Here's some things I'd like to do:

• Get started with web performance testing
• Add complementary performance testing to your website
• Benchmark JavaScript libraries
• Learn about the CrUX History API and tracking data over time
• Performance Day Online

Getting started with Web Performance by HTMHell

https://www.htmhell.dev/adventcalendar/2023/14/

Install Cypress `grep` package to search for tests by string name

• https://github.com/cypress-io/cypress/tree/develop/npm/grep

npx cypress run --env grep=hello

[BUG] Fix the Docker script before pushing to CI

There's something hinky in the Docker script. It's failing the Cypress install like it's not caching the binary correctly. And thus it'll fail on CI until it's fixed.

See cypress-io/cypress#4464 (comment)

Get Cypress running on WSL2

Saw this Gist today ( https://gist.github.com/pjobson/6b9fb926c59f58aa73d4efa10fe13654 ) to get Cypress running correctly on WSL2. Now is a good time to try it out so I can have a consistent dev environment on all boxes.

Create proof-of-concept keyboard testing

Cypress has a great API and I think I can mock keyboard testing easier than Nightwatch. I'll get a proof of concept built out, then start abstracting the functions into helpers.

Try out the `PageObject` pattern for reusable macros

• https://medium.com/reactbrasil/deep-diving-pageobject-pattern-and-using-it-with-cypress-e60b9d7d0d91
• https://martinfowler.com/bliki/PageObject.html

Try out visual regression testing with snapshots

• https://medium.com/norwich-node-user-group/visual-regression-testing-with-cypress-io-and-cypress-image-snapshot-99c520ccc595
• https://docs.cypress.io/api/commands/screenshot

Recreate the Cypress and axe-core test helper in Playwright

https://playwright.dev/docs/intro

Write axe `results.violations` array to JSON file to build an HTML report of issues

Description

It'd be really cool to grab all the axe-core results violations and post them to JSON or an array file. Fortunately Cypress allows this:

• https://docs.cypress.io/api/commands/writefile#Write-JSON-to-a-file

Reorganize the folders in `e2e` directory to make clear what's going on

Thinking I need to make each "type" of test its own folder in the cypress/e2e and public directories. Thinking something like:

public
  |_  sitewide-a11y
  |_  lighthouse
  |_  visual-regression

cypress
  |_ e2e
    |_ sitewide-a11y
    |_ lighthouse
    |_ visual-regression

Create proof-of-concept screen reader testing with Chrome DevTools Protocol

• https://chromedevtools.github.io/devtools-protocol/tot/Accessibility/
• https://dev.to/gabbersepp/low-level-access-to-chrome-debugger-protocol-and-cypress-2epk

Add video recording that only keeps video for failed test runs

https://www.youtube.com/watch?v=TcBQsKvS2l0 and it works exactly as advertised.

Learn to benchmark JavaScript libraries

This guide here: https://calendar.perfplanet.com/2023/benchmarking-profiling-and-optimizing-javascript-libraries/