Forem: James Wadley

[Boost]

James Wadley — Tue, 15 Jul 2025 12:07:06 +0000

Debbie O'Brien

Jul 15 '25

Install Playwright MCP Server in VS Code

#playwright #mcp #ai #vscode

Comments 6

1 min read

Cypress for the absolute beginner

James Wadley — Mon, 11 Nov 2024 09:00:00 +0000

Cypress is a powerful end-to-end testing tool designed to make testing web applications simple, intuitive, and efficient. But for beginners, setting it up can feel overwhelming. This guide is here to break down the setup process step-by-step, guiding you through each part so that by the end, you’ll have Cypress up and running on your machine without any headaches.

Prerequisites

In order to create a Cypress project you must first, install Node.js and a code editor such as VS Code. It would also help you have a basic understanding of NPM too.

Node.js

To install Cypress, first, you will need to install Node. Node.js is a cross-platform, open-source JavaScript runtime environment.

Cypress is built on Node.js and uses it to execute tests written in JavaScript. Node allows Cypress tests to run outside of a browser, enabling headless execution and server-side operations.

To install Node.js go to this link and follow the installation instructions:
https://nodejs.org/

VS Code

Visual Studio Code is a code editor. To install VS Code, go to this link and follow the installation instructions:
https://code.visualstudio.com/download

NPM

Node.js has a default package manager called NPM (Node Packet Manager). NPM allows you to easily install and manage dependencies for your projects. In this example, We will use NPM to install Cypress.

Install Cypress

Details on the Cypress NPM package can be found here:
https://www.npmjs.com/package/cypress

And the official GitHub repo can be found here:
https://github.com/cypress-io/cypress

To install the Cypress NPM package open an empty folder in VS Code, then open a new terminal (and ensure that you are in the correct directory).

Install the Cypress NPM package using the following command:

Launch Cypress by running the following command:

Select 'E2E Testing'

Accept the basic installation of the fixtures file etc.

Select a browser

Note: Electron is a built-in browser for Cypress and usually isn't affected by the same security/limitations as the other browsers. That said, I usually aim to use Chrome as this is the default for most of the apps I test etc.

Select a spec option.

'Scaffold example specs' will provide multiple spec file examples. 'Create new spec' will provide a singular spec file example.

Then enter the path of where to store the script (usually the default option) and click 'Create Spec'.

Then click 'Okay, run the spec'

At this point, the script should launch and run through the example test script (aka scaffolding script)

You should now have a folder structure in VS Code that looks like this:

Add a .gitignore file (to the root directory)

.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid committing transient files from your working directory that aren't useful to other collaborators, such as Cypress screenshots/videos, node_modules etc. or to ensure that passwords and secrets stored in a cypress.env.json file are not pushed to GitHub. Here is an example of what your .gitignore file could look like:

Wrapping Up

If you’re new to Cypress, hopefully, this guide has helped you get set up and running smoothly. With Cypress installed and access to test examples, you’re well on your way to automating your testing workflow and ensuring your applications work as expected.
Remember, learning a new tool takes time, so keep experimenting and exploring the available features and soon, you'll be building robust test suites with confidence. Happy testing!

Let's talk about wick-a11y…

James Wadley — Fri, 01 Nov 2024 17:05:17 +0000

Recently, I conducted a proof of concept using wick-a11y, a new accessibility testing plugin for Cypress developed by Sebastian Clavijo Suero… And it’s amazing!

I can honestly say that wick-a11y is incredible! It’s a real game changer in my opinion, and delivers a range of powerful features and improvements over alternative plugins. Designed by a tester specifically for testers, it prioritises usability and efficiency, making it an exciting new option for those looking to enhance their accessibility testing workflow in Cypress.

User Experience

I’ve had the privilege of communicating directly with Sebastian, and he’s incredibly genuine and helpful. His dedication to building Cypress plugins shines through in the way he prioritises usability and simplicity. Sebastian has put a lot of thought into making installation and configuration as straightforward as possible, minimising the setup steps and allowing users to get started quickly. His plugins are designed with the end-user in mind, making it clear that he genuinely cares about improving the Cypress experience for everyone.

Feature Rich

Wick-a11y offers a comprehensive accessibility analysis for Cypress users, with features designed for smooth and customisable testing.

Users can easily run checks using the cy.checkAccessibility() command and tailor settings for specific impact levels, rules and guidelines.

Each test includes a summary of violations by severity level, displayed in both the Cypress log and console. Affected elements are visually highlighted on the page, with customisable styling based on severity.

Additionally, the interactive console feature allows users to hover over or click on violations in the Cypress log to see more details or hover over the highlighted elements directly on the page for instant feedback.

Reporting

Wick-a11y also excels in reporting, offering comprehensive HTML reports that make it easy to understand and address accessibility issues. These reports provide detailed descriptions of each violation, along with actionable guidance on how to fix them. To enhance clarity, the reports include a full-page screenshot that visually highlights problem areas, providing a clear view of where improvements are needed.

Best of all, this level of reporting comes ready to use out-of-the-box.

Accessible accessibility

One standout feature of wick-a11y is its innovative voice functionality, which brings a new level of accessibility to accessibility testing itself. This feature includes a play button that audibly reads out the test results, making it possible for users to understand accessibility issues without needing to rely on visual cues alone.

Provides audible information for accessibility issues at the suite level, test level, violation type level, and DOM element level, helping users identify issues through voice feedback.

This is especially useful for testers who may have visual impairments themselves or for those who simply prefer to listen to the results. By integrating this feature, wick-a11y embodies the true spirit of accessibility-ensuring that accessibility tools are usable by everyone. This thoughtful design detail not only enhances the usability of the plugin but also demonstrates a genuine commitment to inclusivity in testing.

Documentation

In addition to its powerful features, wick-a11y is complemented by exceptional documentation… Seriously, this is possibly the best documentation I have ever seen for a plugin!! and it truly enhances the user experience.

Sebastian has clearly invested significant effort into creating comprehensive and clear guides, making it easy for users of all skill levels to navigate the plugin’s capabilities. The documentation covers everything from installation and configuration to detailed explanations of each feature, ensuring that users can quickly understand how to utilise the tool effectively.

This commitment to thorough documentation reflects Sebastian’s dedication to supporting the end user, further solidifying wick-a11y as a 'must-have' accessibility plugin for Cypress.

Open-source

Wick-a11y is completely open-source making it accessible to a wide community of developers and testers. By keeping the project open-source, Sebastian invites contributions, collaboration, and ongoing improvement from users around the world. This also allows users the opportunity to modify the plugin to suit specific needs if the out-of-the-box solution doesn't quite meet their testing requirements.

Summary

wick-a11y is a powerful and innovative addition to the world of accessibility testing in Cypress, offering a uniquely user-centred approach that sets it apart from existing plugins. Sebastian’s thoughtful design choices, especially around usability, customisation, and inclusivity, make wick-a11y an incredible tool for accessibility testing and Cypress enthusiasts.

By combining technical excellence with an empathetic design, wick-a11y elevates the testing process and empowers testers of all abilities, ultimately promoting a more accessible web experience for everyone. This plugin is more than just a tool; it’s a testament to what can be achieved when accessibility is prioritised from the ground up.

References:

GitHub: sclavijosuero/wick-a11y

WICK-A11Y Cypress Plugin: Your Unstoppable Ally for Smashing Accessibility Barriers, Cool as John Wick!

WICK-A11Y "Chapter" 1.2.1 - Voice Support: The Accessibility Cypress Plugin that Talks More Than John Wick in His Movies

Joe Colantonio: Playwright GitHub Actions, Accessibility Testing Event and More