ACT 1: EXPOSITION
Ok, Cypress v16 is coming, and our always-friendly Cypress environment variables are going to be revamped.
Why? Security reasons. Cypress.env() variables are exposed in the browser, so they could potentially be accessed by "anyone."
Starting in Cypress v15.10.0, two new types of environment variables have been introduced: cy.env() (for private stuff) and Cypress.expose() (for non-sensitive information). The almighty Cypress.env() has been deprecated and will be gone starting in Cypress v16.
This article is not meant to explain what the change is in detail, or how you can migrate your existing Cypress framework to the new environment model. For that, you can (and will) find extremely helpful information in:
- Cypress official documentation: Migrating away from Cypress.env() and Environment Variables & Secrets
- Gleb Bahmutov's article: Migrating From Cypress.env To cy.env and Cypress.expose Methods.
However, because of this change, many open-source community plugins that rely on env variables for configuration or usage will need to be updated for the new environment variable model.
And the powerful and beloved plugin WICK-A11Y for accessibility in Cypress is no different, because it uses a couple of environment variables for configuration: enableAccessibilityVoice and generateReport.
ACT 2: CONFRONTATION
Since both of those environment variables are not storing sensitive information, they totally could be exposed ones. No biggie.
However, in your wick-a11y configuration inside your Cypress framework, you might have configured those variables in your cypress.env.json file, just like you may have done with all the other env variables in your system. Yeah, why not!
The thing is, in Cypress’s new env variable model, anything configured in cypress.env.json is automatically considered a private env variable.
That means it would need to be read with cy.env(), which is actually a Cypress command that can only be executed within a hook or a test.
So yeah, forget about accessing anything you defined in your cypress.env.json synchronously at the beginning of your test suite using the old Cypress.env() like:
const apiUrl = Cypress.env('apiUrl') // Will disappear
And no, you cannot do this either:
const apiUrl = cy.env('apiUrl') // Ouch. Right, it is a Cypress command!
You can only access environment variables asynchronously if they were defined as exposed variables in cypress.config.js under the expose property, or passed through the CLI with the --expose parameter.
Yeah... it makes sense, but this is not clearly warned anywhere in the Cypress documentation, so I learned it the hard way while migrating wick-a11y to be ready for Cypress v16.
And that was... interesting.
The thing is, wick-a11y, to do its wicked magic, accesses those two environment variables (enableAccessibilityVoice and generateReport) inside a Cypress event, not inside a Cypress hook or test.
This means they cannot be accessed using the cy.env() command, and instead have to be accessed synchronously with Cypress.expose().
Again, no biggie. I can make them exposed variables, but this might become an little inconvenience for YOU, my friend, using wick-a11y.
If you have configured those env variables in your wick-a11y implementation inside cypress.env.json and/or passed them through the CLI as --env parameters, then for wick-a11y to use them as exposed variables, you would need to move them into cypress.config.js or pass them through the CLI as --expose parameters instead.
And that means changing your CLI script definitions, messing around with your Cypress configuration, and cleaning up your cypress.env.json.
To avoid that, I prepared the wick-a11y accessibility plugin to accept both environment variables (enableAccessibilityVoice and generateReport) as either exposed or non-exposed. And that’s totally fine, because these are just configuration variables, no secrets hiding in the shadows here.
That means... you can migrate your project to Cypress v15.10.0 (or v16.0 when it comes out) while using the wick-a11y plugin WITHOUT ANY CHANGE in your Cypress framework.
WICK-A11Y v3.0.1 is fully backward compatible for Cypress v15.10.0 projects moving forward.
No fear! 🙂
Note that wick-a11y v3.0.1 is not intended for Cypress versions prior to 15.10.0.
ACT3: RESOLUTION
So, if you are already on Cypress v15.10.0+ and using the open-source wick-a11y accessibility plugin for Cypress... come on... install wick-a11y v3.0.1!
More cool features are coming soon in wick-a11y v3.
I also have updated the wick-a11y-sample-project to use Cypress v15.11.0 and wick-a11y v3.0.1
Cheers!
I'd love to hear from you! Please don't forget to follow me, leave a comment, or a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥
You can also connect with me on my new YouTube channel: https://www.youtube.com/@SebastianClavijoSuero
If you'd like to support my work, consider buying me a coffee or contributing to a training session, so I can keep learning and sharing cool stuff with all of you.
Thank you for your support!
Top comments (0)