It is a presentation to help software developers get started with a testing platform Cypress. I have created it personally and given the most basics of explanation regarding the new concepts.
2. Introduction
โข End to end testing tool which I have integrated with the github
actions to help me publish a html report on a github page
โข Any push to the main branch on the `test-cypress` repository triggers
the necessary job on chrome browser in an ubuntu machine
โข Few pointers compared to our current project โ we need to upgrade
our node from 11.11.0 to 12.x
โข Run this job once the image is deployed to the staging setup and the
pod is up.
3. Getting Started
โข There are two top level things which we need to keep in mind โ
1. describe block - It is similar to a class in JavaScript
2. it blocks - Same as functions or methods which help us divide the
program logic into much smaller components for better readability
โข Clone my repository and do a `yarn` or `npm install` to have a node-
modules directory with all the required dependencies
โข Change the `adarsh.staging` to `febin.staging` or `cloudyuga.staging`
4. Advantages and Main Functionality
โข Automate the testing process to avoid repetition by a programmer
during the testing - improves productivity
โข Add a working test case, just once, for a new feature being added or
the one already present
โข Find a break point before deployment to production and fix bug
before it goes live for the clients and users.
โข Have a screenshot of the page and point where the error happen.
โข The testing code sounds more like a plain meaningful English
sentence. Of course, a few dots and brackets here and there for
syntactical sugar.
5. Challenges
โข Logging in the user in local host dev environment bypassing the CSRF
error because of the automation script [devise has to enable this]
โข Have a `data-cy=โcreate-new-course-buttonโ` attribute in all the tags
which need to participate in the testing process - best practice.
โข Have a new domain `test-staging.tveacher.com` to dedicate this
environment completely to testing
โข Writing in the Editor JS and then saving that chapter content
โข Get data from the database to verify whether all the content appears
on the screen and is visible to the user [can be done via json
response]
6. Workflow
Login
Admin Student
Create New Course
Add course content
Enroll to the course
1 2 (After completion of all the tasks inside 1)
Access the course and
inspect interactive page
Add a new author
3
7. Future Plans
โข Work on the website interaction for a logged out user
โข Upload an image for the course or author using file uploader
โข Add the cypress automation for the local dev environment.
8. Conclusion
โข If you get stuck while writing a piece of code to carry out a test, do a
google search and refer the stack overflow queries and answers
โข There are open GitHub issues on their official repository to many
features which are yet to come according to their roadmap
โข A real world app based on TypeScript and lowDb is developed by the
official Cypress team to give newbies a taste of testing with cypress
commands
10. Suggestions
โข Do a signup for the new user and test all of the functionality with that
and delete it during the clean-up process.
โข Go to the home or required page instead of โ/backstage/coursesโ
during testing to avoid getting the error message unnecessarily.
โข Come up with a priority list to assign weightage to the testing
workflow which needs to be implemented first.