Comments (14)
Ok will do :)
Fortunately for us there weren't very many changes to be made for updating Cypress from 6 to the latest version 8.7.0. In terms of performance improvements, I'd say its safe to remove any looping using .each()
when only checking a single element in index.html
.
This occurs for the accesskey
test and a few others, the majority of them benefit from using .each()
as there are multiple elements needing to be asserted but removing each() for singular elements will yield small improvements as we don't add extra each() calls for single element assertions.
from checka11y.css.
While I work on migrating from Cypress 6 to 8 in #113, I'll keep an eye out for any "low hanging fruit" in terms of performance improvements. Rewriting the tests in Jest might be the key to obtaining the greatest performance gains and I'd be happy to do it but I can't say for certain it will yield a performance increase until we prototype it.
from checka11y.css.
Ya, I'm interested. please assign to me
from checka11y.css.
@Manishgupta200 just need to double-check with @tannerdolby whether he's ok with this since he said he might keep a look out for low hanging fruit while working on a related ticket.
If @tannerdolby is happy for you to take this ticket then I am too. Would be worth keep @tannerdolby in the loop though, because you'll both have tickets relating to the Cypress tests and I'd hope for any work to be duplicated or discarded due to recent changes.
from checka11y.css.
👋 @Manishgupta200 I'm in the process of migrating Cypress from 6 to 8 in #113 and might catch some "quick fixes" while I finish up that PR. For now, lets keep this on hold (atleast until tomorrow) as I should have the 113 ticket close to finished up by tonight or tomorrow morning.
Then we can have a better idea of what improvements might be made (e.g. staying with Cypress and looking for things to improve or transitioning to using Jest). Hopefully that works for you @jackdomleo7! We can reconnect tomorrow to address things more.
from checka11y.css.
I think the Cypress UI is unnecessary here. We can probably integrate a UI diffing tool in Jest.
I'm happy with js-dom for a project like this, to be honest. I've used js-dom for years in other projects (mainly Vue) and not had any issues so I think for a small CSS project, js-dom will be fine. Would you agree?
That is a nice resource! Thanks for sharing.
from checka11y.css.
Yeah I agree. And your welcome!
With that being said, should we plan on converting #113 to handle switching from Cypress to Jest? Or maybe create a new issue dedicated to the change?
from checka11y.css.
I think including it in #113 would be good 🙂
from checka11y.css.
Thanks again @tannerdolby for the recent PR! @Manishgupta200, if you're still interested, if you can find any other ways that Tanner may have missed to improve the tests, I'd be happy for you to do so. No worries if not though 🙂
Yaa, thanks for your appreciation
from checka11y.css.
Thank you! I've been meaning to get around to this. Off the top of my head, I'm not sure what the benefits are of Jest over Cypress or Cypress over Jest.
from checka11y.css.
Off the top of my head, I'm not sure what the benefits are of Jest over Cypress or Cypress over Jest.
Yeah, this is a good question @jackdomleo7. I did a bit of digging and it "seems" Cypress is the faster of the two and provides the "fastest/reliable" testing for anything running the browser. But again Cypress/Jest provide different features so comparing the two is sort of "apples to apples" with one apple providing a bit more features.
- Cypress is more of a Integration/UI testing framework (with its own test runner) that handles browser sessions for us and runs in the same "run-loop" as the application running which attributes to the speed of Cypress for testing in the browser.
- Jest is a nice unit testing framework (which is also fast) but makes us handle browser sessions (Cypress does this for us) which can be annoying as we are used to the nice UI and testing sessions provided by Cypress. Jest is essentially a test runner but without the nice UI and other features of Cypress.
All in all, both are performant for testing in the browser and unless we benchmark our test suites, I think the performance difference might be negligible.
from checka11y.css.
Thank you for the breakdown @tannerdolby! I think my main concern is finding the fastest tool since I feel these tests are relatively simple.
from checka11y.css.
Your welcome @jackdomleo7! Yeah agreed. The test cases are relatively simple so finding the most performant tool would be ideal. After researching, I couldn't confidently declare a clear "performance" winner between the two. From my experience in MDN Web Docs and GoogleChrome repos, they are using Jest for unit testing browser related stuff.
If we can find a definitive place that says "X is faster than Y" then I think we should go with that. Cypress does a good job here, but if we don't want the nice UI and only want unit tests (as the test cases are relatively simple to begin with), Jest "might" be slightly more performant. I just haven't found anything that puts it plainly and says Jest is faster than Cypress or vice-versa.
We have to decide whether we want our tests to run in a "real browser" environment like Chrome etc, and that is possible with Cypress. Or if we want to use Jest, where were in a "js-dom" simulated browser environment and not a real browser (just providing what a browser "should" have).
Although not directly related to performance, this Cypress.io vs Jest comparison sums up the feature differences.
from checka11y.css.
Thanks again @tannerdolby for the recent PR! @Manishgupta200, if you're still interested, if you can find any other ways that Tanner may have missed to improve the tests, I'd be happy for you to do so. No worries if not though 🙂
from checka11y.css.
Related Issues (20)
- Link to potentially non-accessible document/app HOT 9
- Replace node-sass with Sass
- Update from Cypress 6 to Cypress 8 HOT 5
- Important comment is repeated thrice in main checka11y.css file HOT 12
- Migrate all @import at-rules to @use in Sass HOT 3
- Create Kanban project board
- [BUG]: GitHub doesn't seem to allow contributors to choose one of the pull request templates HOT 1
- [ENHANCEMENT]: Make Sass a peerdependency
- [ENHANCEMENT]: Refactor Sass !default variables to have a less general name and more specific to Checka11y.css
- [ENHANCEMENT]: Create branch for v1 ready for v2 implementation HOT 1
- [DOCUMENTATION]: Migration guide for migrating from v1 to v2
- [DOCUMENTATION]: Move the documentation website source code into the master branch HOT 2
- [ENHANCEMENT]: Upgrade pipeline workflow Node LTS version to v16
- [ENHANCEMENT]: Generate minified CSS files too HOT 2
- [BUG]: Warnings are prioritized over errors HOT 3
- [A11Y FEATURE]: The page <title> should not be empty HOT 5
- [A11Y FEATURE]: Allow user zoom HOT 4
- [BUG]: `<` & `>` are appearing on some messages
- [ENHANCEMENT]: Upgrade Cypress to v12 or later HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from checka11y.css.