Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
•
3 recomendaciones•15,953 vistas
** Full webinar recording: https://youtu.be/D7vxFuwnUio ** Watch Sr. Architect Gil Tayar's special hands-on session, where he explains & demonstrates how Selenium and Cypress differ. The session covers the following topics: * How and why do frontend developers write tests *Selenium architecture *Cypress architecture *Live Demo of Cypress - including how to write a Cypress test, and how it’s used *How Cypress deals with flakiness *Cypress and backdoors to development *Visual Testing using Cypress
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Similar a Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar (20)
Más de Applitools
Más de Applitools (20)
Último
Último (20)
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
- 1. @giltayar Cypress vs Selenium WebDriver: Better, or just different? Gil Tayar (@giltayar) December 2019 Github repo: https://github.com/giltayar/cypress-vs-selenium The presentation: http://bit.ly/cypress-vs-selenium-webinar 1
- 2. @giltayar@giltayar About Me ● My developer experience goes all the way back to the ‘80s. ● Am, was, and always will be a developer ● Testing the code I write is my passion ● Currently evangelist and architect @ Applitools ● We deliver Visual Testing tools: If you’re serious about testing, checkout Applitools Eyes ● Sometimes my arms bend back ● But the gum I like is coming back in style @giltayar 22
- 4. @giltayar The Talk is About ● What are Cypress and Selenium WebDriver? ● Why we should care? ● How are they different from each other? and... ● Who wins? 4
- 7. @giltayar They’re Browser Automation Tools 7
- 8. @giltayar They… uh… Automate Browsers! 8
- 9. @giltayar Example (Cypress) cy.visit('http://todomvc-app-for-testing.surge.sh/') cy.get('.new-todo').type('Clean room{enter}') cy.get('.toggle').click() cy.contains('Clear completed').click() cy.get('.todo-list').should('not.have.descendants', 'li') 9
- 10. @giltayar Example (Selenium WebDriver) await driver.get('http://todomvc-app-for-testing.surge.sh/' ) const newTodoElement = await driver.findElement(By.css('.new-todo')) await newTodoElement .sendKeys('Clean room' + Key.RETURN) await (await driver.findElement(By.css('.toggle'))).click() await (await driver.findElement( By.xpath('//*[text() = "Clear completed"]' ))).click() expect(await (await driver.findElement(By.css('.todo-list'))). findElements(By.css('li'))).to.have.length(0) 10
- 11. @giltayar Who needs browser automation tools? 11
- 13. @giltayar Unit Integration E2E The Pyramid of Testing 13
- 14. @giltayar Unit Integration E2E The Pyramid of Testing Slowness Flakiness Confidence 14
- 15. @giltayar Developers prefer Unit & Integration Tests 15
- 16. @giltayar But Unit & Integration Tests Are Not Enough 16
- 17. @giltayar Developers MUST also test the product in whole 17
- 18. @giltayar But that doesn’t mean that they like it... 18
- 19. @giltayar Which Developers Mostly Deal with Browsers? Frontend Developers! 19
- 20. @giltayar 20
- 21. @giltayar Who else needs browser automation tools? 21
- 23. @giltayar Why? Why can’t they do unit & integration? 23
- 24. @giltayar Because of developer “throwing things over the wall” mentality 24
- 25. @giltayar QA Engineers Have Access Only to the Final Product 25 QA QA QA QA
- 26. @giltayar Why is this important? 26
- 28. @giltayar Developers Testers ● We like fast ● We have access to the code ● We can test the application from the inside ● Prefer unit & integration tests ● We ❤ JavaScript ● There are other browsers? 😉 ● We’re OK with long suites of tests ● We don’t have access to the code ● We can test the application only from the outside, ● So we MUST do mostly E2E tests ● We ❤ many languages ● So many browsers to test! 28
- 29. @giltayar How Do They Work? 29
- 31. @giltayar Selenium ● Json Huggins, 2004 @ ThoughtWorks, writes Selenium RC (now dead) ● Simon Stewart, 2007 @ ThoughtWorks, writes Selenium WebDriver ● Name: “mocking a competitor named Mercury, saying that you can cure mercury poisoning by taking Selenium supplements” ● Suite of Tools ○ Selenium WebDriver ○ Selenium Grid ○ Selenium IDE 31
- 32. @giltayar Selenium is Cross Language & Cross Browser 32
- 34. @giltayar Selenium Architecture 34 A test using WebDriver Browser Driver Browser Selenium Protocol Browser Protocol
- 35. @giltayar Demo: Show and Run Selenium Test 35
- 36. @giltayar What’s All This Async/Await? 36
- 37. @giltayar Async/Await A nicer way to write I/O code in JavaScript 37
- 38. @giltayar Why do We Need Async/Await? 38
- 39. @giltayar Because Selenium is a lot of I/O (Asynchronous) 39 Test with WebDriver Browser Driver Driver Selenium Protocol Browser Protocol
- 40. @giltayar Because of the cross-everything and target audience Pros ● Browser support: high ● Cross Language ● Test Runner: whatever you want 40 Cons ● Asynchronous (slower) ● Flaky unless handled Target audience: testers. ● Grid support for running stuff in parallel (remember large slow suites?) ● Cross Browser is important
- 41. @giltayar Dealing With Flakiness await driver.get( 'http://todomvc-app-for-testing.surge.sh/?delay-new-todo=1000' ) await driver.wait(until.elementLocated(By.css('.new-todo'))) const newTodoElement = await driver.findElement(By.css('.new-todo')) await newTodoElement .sendKeys('Clean room' + Key.RETURN) 41
- 42. @giltayar Dealing With Flakiness: Demo 42
- 44. @giltayar Cypress ● Started in 2015 by Brian Mann and Randall Kent ● More than just browser automation: a tool for frontend E2E testing ● Exact opposite of Selenium ● Commercial with open source freemium model 44
- 45. @giltayar Cypress ● Started at 2015 by Brian Mann and Randall Kent ● More than just browser automation: a tool for frontend E2E testing ● Exact opposite of Selenium ● Open source with commercial additions 45
- 46. @giltayar 46 Selenium Cypress Cross-browser Only Chrome Cross language Only JavaScript Cross test-runner Only Mocha Slow(er) Fast Target audience: testers Target audience: developers Asynchronous Synchronous Flaky Less flaky Developer UX: none Developer UX: good Mediocre docs Really good docs Grid support Parallelism only in commercial offering Good iFrame and Popup support Bad iFrame and popup support
- 48. @giltayar Demo: Show and Run Cypress Test 48
- 49. @giltayar Interactive Mode is Da Bomb! Developers don’t want to spend time on E2E. They don’t do it a lot (remember pyramid?), Need help building the test. 49
- 50. @giltayar Demo: Element Locator and Dom History 50
- 51. @giltayar Sorry, not that Dom 51
- 52. @giltayar Demo: Element Locator and Dom History 52 DOM
- 55. @giltayar Developer UX is Fabulous! 55
- 56. @giltayar Flakiness & the Byzantine Execution Model 56
- 57. @giltayar Demo: Solving the Flakiness Problem 57
- 58. @giltayar Cypress Tests Runs in the Browser 58
- 59. @giltayar Synchronous and fast access to the page 59
- 60. @giltayar Synchronous and fast are important when dealing with flakiness 60
- 61. @giltayar Cypress waits until element appears and assertion is true 61
- 62. @giltayar Huh? But there’s no async/a...wait! 62
- 63. @giltayar Does it… Busy Wait?! 63
- 64. @giltayar Nope! It does “Record and Play” 64
- 65. @giltayar Cypress Test Execution Running the test only tells Cypress what to do It remembers the actions, and then, when the test end, executes the actions and assertions 65
- 66. @giltayar So it’s difficult to do conditional tests const element = cy.get('label') if (element.text() === 'something') { // do something } 66
- 67. @giltayar cy.get('label').then($element => { if (element.text() === 'something') { // do something } }) ...But Possible 67
- 68. @giltayar Do I Like It? 68
- 69. @giltayar iFrames and Popups ● Does your app use iframes and popups! ● Buyer beware! Cypress does not support them ○ (although there are hacks around it) ● Why? Because the code runs in the browser... 69
- 70. @giltayar Cypress Tests Run in the Browser 70
- 71. @giltayar So... ● Fast access to DOM (synchronous) ● And access to DOM also enables cool developer stuff 71
- 72. @giltayar Warning, React & Redux Ahead 72
- 73. @giltayar Demo: Access To Redux Store 73
- 74. @giltayar Mocking ● Sinon ● Fabulously easy HTTP server mocking 74
- 76. @giltayar Demo: Visual Testing Using Applitools Eyes 76
- 77. @giltayar Selenium Cypress Cross-browser Only Chrome Cross language Only JavaScript Cross test-runner Only Mocha Slow(er) Fast Target audience: testers Target audience: developers Asynchronous Synchronous Flaky Less flaky Developer UX: none Developer UX: good Mediocre docs Really good docs Grid support Parallelism only in commercial offering Good iFrame and Popup support Bad iFrame and popup support 77 Which Do You Choose?
- 78. @giltayar ● Must do Cross Browser Testing? ○ Is Visual Cross browser testing enough? ■ Yes: go with Cypress (with Applitools Visual Grid) ○ No: go with Selenium ● Run hundreds of tests? ○ Yes: Go with Selenium Grid or buy Cypress Commercial ○ No: Good. :-) Go with Cypress ● Are you a tester? ○ No: Go with Cypress ○ Yes: Dunno. Try Cypress, maybe you’ll like it Decision Tree 78
- 79. @giltayar Thank You! Github repo: https://github.com/giltayar/cypress-vs-selenium The presentation: http://bit.ly/cypress-vs-selenium-webinar 79