More Related Content
What's hot
What's hot (20)
Similar to Introduction to cypress in Angular (Chinese)
Similar to Introduction to cypress in Angular (Chinese) (20)
Recently uploaded
Recently uploaded (20)
Introduction to cypress in Angular (Chinese)
- 1. Introduction to Cypress e2e testing in Angular
- 2. 我是谁？ • 尤丰达 - Yew Hong Tat • 软件工程师 @ 沃旭能源 Orsted • 熟悉 Angular 和 C# • 爬山，慢跑爱好者 hongtat_yew hongtat88
- 3. 手动测试 vs 自动测试
- 4. e2e testing
- 5. 为什么要 做e2e测试？ • 增加信心 • 减少程序错误 • 确保关键功能在发布的时候可以正常运行 • e2e 测试是模仿用户的行为
- 6. e2e 测试 in Angular • Protractor • Cypress • Katalon • Selenium (它不是测试工具, 它是自动化工具)
- 7. Protractor
- 8. Future of Angular E2E & Plans for Protractor • Protractor was created in 2013, when • WebDriver APIs were not yet a standard and • end-to-end (e2e) tests were hard to write due to lack of support for async / await. • To solve this problem, Protractor wraps selenium-webdriver and abstracted asynchronous operations from developers with the use of Control Flow. • Protractor, being dependent on selenium-webdriver, is not able to upgrade to the new version without introducing a huge breaking change and forcing users to do a migration for all their tests.
- 9. 结果
- 10. Angular 未来计划 • Angular 将会 deprecate protractor - Version 12 • Angular team will ensure smooth integration with Cypress by using Angular CLI
- 11. 如果现在就要用的话 • Or follow the guidelines below to configure your angular projects to use Cypress: • https://docs.cypress.io/guides/migrating-to-cypress/protractor#Introduction • https://nx.dev/latest/angular/modern-angular/protractor-to-cypress
- 12. Why Cypress? • Free and open-source test runner • Run in browser alongside with your application code • Mocha, Chai, JQuery selectors built in • Error reporting, screenshots and videos for improve debugging • Great documentation and support
- 17. Demo 1 • Install Cypress • Set base url in Cypress configuration • Add cy:run and cy:open scripts into package.json
- 20. Demo 2: Your first test • Add intelliSense triple-slashes directive into your test file • Write a describe with a single it to test the baseUrl of your application • https://docs.cypress.io/api/commands/visit • Run and test to see in action
- 21. Steps to write a test • Visit a page • Query for an element • Perform a command • Make assertions • Repeat as needed https://docs.cypress.io/guides/getting-started/writing-your-first-test#Write-a-real-test
- 22. Cypress API Basics • Selectors • cy.get() • cy.contains() • Commands • Build in actionability check • cy.click() • cy.type() • Assertions • Chai Assertion Library • BDD (expect, should) • TDD (assert) https://docs.cypress.io/guides/getting-started/writing-your-first-test#Write-a-real-test
- 23. Demo 3: Selecting DOM elements • Write a test that does the following • Visit our page • Select the header banner and validates it contains the text • Selects any other element on the page
- 24. Selector best practices • Use data attribute to select https://docs.cypress.io/guides/references/best-practices
- 25. Selector best practices • Use custom command to select https://docs.cypress.io/guides/references/best-practices
- 26. Demo 4: Adding test selectors • Update the html to add a data-cy attribute to any element • Rewrite your Cypress test to select using the data-cy attribute instead
- 27. Cypress Commands • Common commands: • click • type • clear • check • Trigger (https://docs.cypress.io/api/commands/trigger#Syntax) • Make sure chained off a command that yields a cy element, like cy.get() or cy.contains() https://docs.cypress.io/guides/core-concepts/interacting-with-elements
- 28. Cypress Commands • Alternative commands and assertions to make command retryable
- 29. Demo 5: Testing App Functionality • Write a test that does the following: • Visit our application • http://localhost:4200/sign-in • Login using the following username and password • hughes.brian@company.com • admin • Don’t worry about assertions first, just use selectors and commands
- 30. Type of Assertions • Page elements render as expected • Content • Style • Visibility/Actionability • User actions result in expected behaviour • Links go to correct URLs • Event listeners fire correctly • Expected side effects occur • HTTP requests • Data updates https://docs.cypress.io/guides/references/assertions
- 31. Demo 6: Adding assertions • Write a test that does the following: • Visit our application • http://localhost:4200/sign-in • Login using the following username and password • hong@company.com • admin • Assert the item you just enter
- 32. Network Request • Monitor all the network activities with the Cypress test runner. • Spy or stub the network request • Setup test state • Bypass third party integrations • Make assertion on the network requests https://docs.cypress.io/guides/guides/network-requests
- 35. Demo 7: Assert a network request • Visit our application • Intercept a request • Add a wait in your test for the network request, then assert on whether its status is 200
- 36. Thank you Desk: https://1drv.ms/p/s!AhzbaHAE3IDkguc09FbmZAr9Aduc5w?e=4KEs3l Code: hongtat88/cypress-tw (github.com)
- 37. Write Cypress in TypeScript • https://docs.cypress.io/guides/tooling/typescript-support#Install- TypeScript
- 38. Workshop • Testing Angular Applications with Cypress Cecelia Martinez | EnterpriseNG 2020 #ngconf - YouTube • CypressCecelia/cypress-testing-angular-workshop: Exemplary real world application built with Angular (github.com)
Editor's Notes
- Writing a Plugin | Cypress Documentation
- Project.component.ts 'https://reqres.in/api/users' cy.wait('@getUsers') .its('response.statusCode') .should('equal', 200);