Introduction to E2E testing with cypress #146
Conversation
Topics/Tech_Stacks/Cypress.md
Outdated
| # Why do end to end testing? | ||
|
|
||
| [https://circleci.com/blog/what-is-end-to-end-testing/](https://circleci.com/blog/what-is-end-to-end-testing/) | ||
|
|
||
| The above link has a good explanation on what end to end testing is and why it should be used. |
There was a problem hiding this comment.
Rather than just providing a link, it might be better to also provide a summary of the main points of the linked article explaining the importance of end-to-end testing. This way, the reader could get a quick understanding without needing to navigate away, and if they wanted to learn more, they could then click the provided link.
There was a problem hiding this comment.
I think this is a great idea, added that
|
|
||
| The above link has a good explanation on what end to end testing is and why it should be used. | ||
|
|
||
| Cypress very closely mimics a real user, think of it as a robot accessing your website from a browser like a human would, but you can program the robot to interact with your website however you like and programmatically check the output on the screen. |
There was a problem hiding this comment.
It might be beneficial to add a comparison with other testing tools after this section, to highlight the strengths and weaknesses of Cypress. Or, even after the "Best Practices" section.
There was a problem hiding this comment.
Let me know if this section is hard to understand.
There was a problem hiding this comment.
I think it's easy enough to understand. If you want, an example might also help explain.
Topics/Tech_Stacks/Cypress.md
Outdated
|
|
||
| # Installation and setup: | ||
|
|
||
| Cypress can be automatically installed with npm: `npm install cypress` |
There was a problem hiding this comment.
For readers who may be unfamiliar with npm, it could be helpful to quickly describe why it is used for installation.
There was a problem hiding this comment.
I don't exactly agree with this, because npm is just so important for javascript and node.js that its even bundled with node, but I added a hyperlink for npm just in case.
There was a problem hiding this comment.
True, a hyperlink for npm is probably good enough.
Topics/Tech_Stacks/Cypress.md
Outdated
| See [https://docs.cypress.io/guides/getting-started/installing-cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more details. | ||
|
|
||
| To run cypress, we can use the command `npx cypress open` and follow the instructions provided on the UI. | ||
|
|
||
| See [https://docs.cypress.io/guides/getting-started/opening-the-app](https://docs.cypress.io/guides/getting-started/opening-the-app) for more details. | ||
|
|
||
| # The basics | ||
|
|
||
| Cypress has an extremely detailed guide for getting started, explains how to create and run tests, and there is also a lot of information linked as well. | ||
|
|
||
| [https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) | ||
|
|
||
| [https://docs.cypress.io/guides/core-concepts/introduction-to-cypress](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress) | ||
|
|
||
| I highly recommend reading through the above two links, and the entirety of the core concepts section in the documentation. It gives a thorough introduction on how cypress works and how to use it to test your application. |
There was a problem hiding this comment.
Instead of just recommending reading through the links, it might be better to additionally give a brief overview of what the reader can expect to find in each section. This could help the user better navigate around and understand what they will find.
There was a problem hiding this comment.
Added this. There are many different sections in the core concepts section, so I didn't provide an overview of each of them (it'd probably get too long) and the titles are descriptive enough in my opinion
Topics/Tech_Stacks/Cypress.md
Outdated
| Cypress provides their own list of best practices here: [https://docs.cypress.io/guides/references/best-practices](https://docs.cypress.io/guides/references/best-practices) | ||
|
|
||
| One common use case for cypress (and UI testing in general) is to test responsiveness, does the UI look like it should in different viewports? | ||
|
|
||
| While it is possible to duplicate tests, this may cause you to need to repeat large parts of the code to select elements and fill out forms, which has nothing to do with | ||
|
|
||
| It is much easier to use the beforeEach() hook and a cypress context() to bundle viewpoints together. As an example: |
There was a problem hiding this comment.
The way you describe a common use case after the link to the list of best practices, as well as provide an example is great! It could be helpful to add a few more key best practices, with concise explanations and examples. If you decide to do so, it might also be better for organization to break down this part into subsections.
There was a problem hiding this comment.
While I didn't add more key practices, as I prefer to keep everything tied to one narrative (the use case) I did add more to the single use case I had and moved the link to the back as well for further reading.
There was a problem hiding this comment.
Fair enough, if you want to just focus on the narrative of the use case, then what you have here seems sufficient.
|
I addressed all the comments, I think most of them made sense but some of them I didn't, I wrote down in each comment which ones I took and which ones I didn't. |
There was a problem hiding this comment.
Other than my new suggestion to possibly add an example in the "Why do end to end testing" section, I think you could also consider adding a table of contents once you have finalized all of your sections. Good work with the changes and addressing my comments!
|
|
||
| The above link has a good explanation on what end to end testing is and why it should be used. | ||
|
|
||
| Cypress very closely mimics a real user, think of it as a robot accessing your website from a browser like a human would, but you can program the robot to interact with your website however you like and programmatically check the output on the screen. |
There was a problem hiding this comment.
I think it's easy enough to understand. If you want, an example might also help explain.
Topics/Tech_Stacks/Cypress.md
Outdated
| See [https://docs.cypress.io/guides/getting-started/installing-cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more details. | ||
|
|
||
| To run cypress, we can use the command `npx cypress open` and follow the instructions provided on the UI. | ||
|
|
||
| See [https://docs.cypress.io/guides/getting-started/opening-the-app](https://docs.cypress.io/guides/getting-started/opening-the-app) for more details. | ||
|
|
||
| # The basics | ||
|
|
||
| Cypress has an extremely detailed guide for getting started, explains how to create and run tests, and there is also a lot of information linked as well. | ||
|
|
||
| [https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) | ||
|
|
||
| [https://docs.cypress.io/guides/core-concepts/introduction-to-cypress](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress) | ||
|
|
||
| I highly recommend reading through the above two links, and the entirety of the core concepts section in the documentation. It gives a thorough introduction on how cypress works and how to use it to test your application. |
Topics/Tech_Stacks/Cypress.md
Outdated
|
|
||
| # Installation and setup: | ||
|
|
||
| Cypress can be automatically installed with npm: `npm install cypress` |
There was a problem hiding this comment.
True, a hyperlink for npm is probably good enough.
Topics/Tech_Stacks/Cypress.md
Outdated
| Cypress provides their own list of best practices here: [https://docs.cypress.io/guides/references/best-practices](https://docs.cypress.io/guides/references/best-practices) | ||
|
|
||
| One common use case for cypress (and UI testing in general) is to test responsiveness, does the UI look like it should in different viewports? | ||
|
|
||
| While it is possible to duplicate tests, this may cause you to need to repeat large parts of the code to select elements and fill out forms, which has nothing to do with | ||
|
|
||
| It is much easier to use the beforeEach() hook and a cypress context() to bundle viewpoints together. As an example: |
There was a problem hiding this comment.
Fair enough, if you want to just focus on the narrative of the use case, then what you have here seems sufficient.
|
I added the table of contents since I thought it was a good idea, and made some other housekeeping changes. Let me know what you think, is it ready to merge? |
Added some resources about learning how to install, setup and use cypress, and an example use case.