Download to read offline
More Related Content
Similar to Introduction to cypress in Angular (Chinese)
![[English][Test Girls] Zero to Hero: Start Test automation with Cypress](https://cdn.slidesharecdn.com/ss_thumbnails/entestgirlstestingwithcypress-191024022807-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to cypress in Angular (Chinese)
- 1. Introduction to Cypress e2etesting in Angular
- 2. 我是谁？ • 尤丰达 -Yew Hong Tat • 软件工程师 @ 沃旭能源 Orsted • 熟悉 Angular 和 C# • 爬山，慢跑爱好者 hongtat_yew hongtat88
- 3.
- 4.
- 5. 为什么要 做e2e测试？ • 增加信心 • 减少程序错误 •确保关键功能在发布的时候可以正常运行 • e2e 测试是模仿用户的行为
- 6. e2e 测试 in Angular •Protractor • Cypress • Katalon • Selenium (它不是测试工具, 它是自动化工具)
- 7.
- 8. Future of AngularE2E & 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 followthe 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? • Freeand 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
- 13.
- 14.
- 15.
- 16.
- 17. Demo 1 • InstallCypress • Set base url in Cypress configuration • Add cy:run and cy:open scripts into package.json
- 18.
- 19.
- 20. Demo 2: Yourfirst 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 writea 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: SelectingDOM 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: Addingtest 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 • Commoncommands: • 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 • Alternativecommands and assertions to make command retryable
- 29. Demo 5: TestingApp 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: Addingassertions • 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 • Monitorall 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
- 33.
- 34.
- 35. Demo 7: Asserta 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.
- 37. Write Cypress inTypeScript • https://docs.cypress.io/guides/tooling/typescript-support#Install- TypeScript
- 38. Workshop • Testing AngularApplications with Cypress Cecelia Martinez | EnterpriseNG 2020 #ngconf - YouTube • CypressCecelia/cypress-testing-angular-workshop: Exemplary real world application built with Angular (github.com)
- 39.