Progressive Web App Testing With Cypress.io
Download as PPTX, PDF0 likes455 views
The document presents an overview of Cypress.io, a modern frontend automation testing tool designed for web applications using technologies like ReactJS and Angular. It highlights Cypress's ease of use, unique features compared to Selenium, installation steps, and how to run tests with a focus on JavaScript frameworks. Additionally, it details the structure of the Cypress test runner and its locator strategies for interacting with the DOM.
![Cypress Supported Browser/Language.
● Browser
○ Chrome
○ Electron
○ Firefox & IE [Not Supported/ Under Construction.]
● Language Support
○ JavaScript](https://image.slidesharecdn.com/cypress-200123114412/85/Progressive-Web-App-Testing-With-Cypress-io-9-320.jpg)
![Cypress Setup
● As cypress is a JavaScript automation tool, that’s why we need to work
with modern JavaScript tools like Node.JS and NPM. To install node.js
from scratch please visit the node.js official website.
○ $ node –version
// to check the node installed or not.
○ $ npm init -y
// This command will create a package.json file and initialize a folder to accept the npm
command.
○ $ npm install cypress@[version]
// install an specific version of cypress, here version is an optional field.](https://image.slidesharecdn.com/cypress-200123114412/85/Progressive-Web-App-Testing-With-Cypress-io-11-320.jpg)
Progressive Web App Testing With Cypress.io
- 1. Progressive Web App Testing With Cypress.io Presented By: Gaurav Kumar Shukla
- 2. Agenda ● What is Cypress.io ● Why Cypress ● Architecture of Cypress ● Cypress Installation ● Cypress Test Runner ● Cypress Locator Strategy ● Example ● Q&A
- 4. What is Cypress.io? ● Cypress.io is a frontend automation testing tool built for modern web applications developed on some of the emerging technologies like Reactjs, Ionic, Vue,and Angular. ● Cypress is a test automation tool that can perform fast, easy and reliable testing for anything that runs in a browser.
- 5. Why Cypress.io? ● Cypress is next generation automation testing tool, that address the major pain points developers and QA team face while testing modern applications. ○ Test ■ Setup ■ Write ■ Run ■ Debug ○ Cypress makes it amazingly simple.
- 8. How is it different from Selenium? ● Native Access, as your test code can access all the same objects that your application code can. ● Stub the browser or your application’s functions and force them to behave as needed in your test case. ● Expose data stores (like in Redux) so you can programmatically alter the state of your application directly from your test code. ● Test edge cases like ‘empty views’ by forcing your server to send empty responses. ● Test how your application responds to errors on your server by modifying response status codes to be 500 so that timers or polls automatically fire without having to wait for the required time in your tests.
- 9. Cypress Supported Browser/Language. ● Browser ○ Chrome ○ Electron ○ Firefox & IE [Not Supported/ Under Construction.] ● Language Support ○ JavaScript
- 11. Cypress Setup ● As cypress is a JavaScript automation tool, that’s why we need to work with modern JavaScript tools like Node.JS and NPM. To install node.js from scratch please visit the node.js official website. ○ $ node –version // to check the node installed or not. ○ $ npm init -y // This command will create a package.json file and initialize a folder to accept the npm command. ○ $ npm install cypress@[version] // install an specific version of cypress, here version is an optional field.
- 12. Run Cypress ● $ npx cypress open // It will open cypress test runner and create a folder structure in your project directory. ○ Cypress ■ Fixture: It contains all the data files which contains some static configuration and user data. for ex. username, password etc. ■ Integration: It contains all the test files, the test that we write will be in this folder. ● Examples: It is a sub folder in integration older that contains some of predefined examples, it is automatically generated when we first install the cypress. ■ plugins: As cypress is also a node process, so we can integrate ‘n’ number of plugins here by putting them in this folder. ■ support: it includes reusable behavior such as Custom Commands or global overrides that you want applied and available to all of your spec files.
- 13. Cypress Test Runner ● Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test. ● Cypress Test Runner Contains: ○ Command Log ○ Test Status Menu ○ URL Preview ○ App Preview and more...
- 15. Write a basic test. ● As cypress support javascript so we need to follow the standards of at least one javascript framework like Chai, Jasmine or Mocha. ● Cypress recommend to use inbuilt framework Mocha.
- 16. Cypress Locator Strategy ● Cypress support Jquery locators. ○ CSS Selector ● Some commands in Cypress are for interacting with the DOM such as: ○ .click() ○ .dblclick() ○ .rightclick() ○ .type() ○ .clear() ○ .check() ○ .uncheck() ○ .select() ○ .trigger()
- 19. References: ● https://www.cypress.io/ ● https://www.udemy.com/course/cypress-tutorial/ ● https://rap.knoldus.com/
- 20. Thank You. ^.^
Editor's Notes
- #2: Hello Everyone, As you all know, I am Gaurav Shukla, currently working in Knoldus as a module lead QA consultant since last 4.5 years and currently sitted in the 4th block of Knoldus growth path. So today we gather here to discuss something about an FE automation testing tool named cypress.io.
- #3: Let's have a look on the agenda of today's session.
- #4: Before moving on further, let’s have a quick introduction about progressive web app, might be some of you haven't heard the phrase previously.
- #5: What is cypress.io? That’s pretty straight forward. Cypress.io is a frontend automation testing tool built for modern web applications developed on some of the emerging technologies like Reactjs, Ionic, Vue,and Angular. Cypress is a test automation tool that can perform fast, easy and reliable testing for anything that runs in a browser.
- #6: What are the major questions in our mind when we pick a tool to automate tests? 1) How to Setup? 2) How to write test? 3) How to run those test? 4) How to debug if any test failed? Let's keep cypress out from the picture and try to figure out the answers of above four questions from a selenium user like me. 1) How to setup? Selenium setup is a lengthy process, choose framework, setup environment, configure pom.xml or build.sbt, integrate an another testNg framework or apache POI to achieve data driven capabilities and many more. WHich is a timetaking process and in real life scenarios we are lazy tester we don't have much time to do all these things. 2) How to write test? I love this question, selenium is a great tool and it's really a very tedious jpb to write tests in selenium for a person who has just started his carrier as a qa, so most of the companies prefer developers to write selenium scripts, as it requires good programming skills. 3) How to run those test? Test running is not a problem, it is just a small command, but to run on a specific browser, run the test parrallely, ci/cd integration, is also not an easy task. 4) How to debug? if any test failed: Debugging is also a tedius jon in selenium, for ex: if broser version is not compatible with selenium then you can not find the root cause just to see the error message in terminal. Cypress makes these 4 tasks amazingly simple: 1) How to setup? As it is a javascript framework built on modern tools like node and npm, so to setup cypress is just a one step process by using command like npm install cypress. 2) How to write test? as it is a javascript framework and support mocha as a test runner with a very simple syntax for writing test. 3) Run the test? As we just need to do browser configuration iin package.json so we don't need to worry about the browser driver and all to run the test on specific browser. 4) How to debug? Debugging in easy as you can see each and every failure on the dashboard with easy to understand error messages.
- #7: We write test scripts that wrapped as a JSON file and it is sent to the browser driver, what are browser drivers, it acts as a web browser but not an actual browser, so everytime when we need to run the test we need to invoke the driver instance for a particular browser. like chromeDriver, geckoDriver, safariDriver, IEDrive etc. So we invoke a browser driver and inject our code in that driver which interpret the code and insprect the necesary commands and sent to the web browser to perform actions. SO this is how it work, to not directly interact with the browser. There is a mediator who perform all the operations on behalf. That's why it is little slow, not is selenium, any tools wthose uses selenium as there parent.
- #8: Let's see how cypress work. Cypress engine Directly Operates inside the browser. So in a nutshell it is a browser that is executing your code not a proxy server like a specific browser driver. that enable cypress to listen and modify the browser behavior at run time by manipulating DOM and altering network request and responses on the fly. Ability to mock the server response: As cypress run inside the browser, so it has ability to access all the network requests and when we get the repsonse cypress intelligently stop that response and inject that mock response to the browser. So as everything is running on the browser so now instead of specific browser driver it's browser responsibility to take care all the things and complete the test execution. And it opens the door of new kind of testing with having ultimate control over application [FE and BE].
- #9: So as we have already seen how cypress architure different from selenium, but apart from architecture there are some other features it have which makes cypress a better tool. Someof them are:
- #10: As of now cypress only support chrome and electron browser which is a lightweight version of chrome browser and only support Javascript, it might be a drawback of cypress, but if we talk with a perspective that FE community majorly work with javascript, and for backend we might be little worry about language support but for FE, it’s not a major drawback for me. If we talk in terms of browser support so as per the report of sep 2019 chrome own the 70% market of desktop internet browser. See:
- #11: Change the Snippet
- #17: Cypress claims they use jquery locators, jquery locators are nothings it’s just a css selector. AS selenium has lot of locators like id, name, classname, xpath, css selector, but cypress only supports css selector.