End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Ember London meetup June 2018)

Here are the slides from my talk at Ember London meetup June 2018 on End-to-end testing Single Page Apps & APIs with Cucumber.js and Puppeteer

Transcript

1. End-to-end Testing Single Page Apps & APIs with Cucumber.js & Puppeteer London Ember Meetup June 2018
2. So why this talk?
3. End-to-end testing seems to be a lost art
4. Back in the old days…
5. I was working here
6. We built apps using…
7. End-to-end testing Rails apps was simple & well-supported
10. The combination of these two libraries with Rails worked really well
11. But then Ruby on Rails was overshadowed by another framework
13. At the same time, frontend Javascript tooling changed
15. … and it kept changing
17. As tech stacks changed, monoliths were replaced by Single Page Apps and APIs
18. And old problems that were solved in previous frameworks were being re- solved all over again…
19. But some problems were not…
20. Such as how to do E2E testing on apps that were split into SPAs and APIs
21. This happened to the extent that some developers avoided doing any E2E testing whatsoever
22. and simply reverted to relying on unit testing
23. … which is risky
24. … which is risky
25. So how do we solve the challenge of E2E testing Single Page Apps and APIs?
26. I want to show you a way
28. Cucumber
29. A Behaviour-Driven-Development (BDD) tool for describing how an application should work, in terms of features
30. The description of the application’s features is used to run automated tests
31. It becomes a safety net to catch bugs and prevent regressions
32. It also provides living documentation on the app that is accessible to everyone
33. Cucumber in 7 steps
34. Step 1 In a Node.js app, install cucumber as a development dependency
35. Step 2 Create a folder in your app called “features”. We will put cucumber-related files and folders in here. features
36. Step 3 Meet with your product owner and talk about a feature to implement. Talk about how that feature works from the perspective of the user, and write notes.
37. Step 4 Create a file in the features folder, say for example delete_user.feature. Type the notes from earlier into that feature file, and write them in a format like the example here.
38. Step 4 - an example
39. Step 5 The feature file we created can be parsed by Cucumber. Go to the terminal, and run this command on the right. Cucumber will look for files in the features folder, execute them, and print out results.
40. Step 5 - step definitions When executing the feature file, Cucumber will try to match the lines in the feature file to step definition functions. If no step definition functions are found, it will print out example code to insert. step definition files
41. Step 5 - step definitions
42. Step 5 - step definitions When a step contains one or more words in quotes, Cucumber’s parser will extract out that quote and pass it to the step definition function as a variable. It also does this for numbers as well.
43. Step 5 - step definitions
44. Step 6 Create a folder called “step_definitions” inside of the features folder. Then create a file, say for example “common_steps.js” inside the step_definitions folder, and put the step definitions code in there. Cucumber will find this code and execute it upon subsequent test runs step_definitions common_steps.js
45. Step 7 We fill in the step definition functions with code that performs an action, such as: - Clicking on a button in the web app - Checking that a user is logged into an app - Querying the database to check that a record was entered into a table
46. Step 7 Our tests should fail, but as we write the application’s code, they will start to pass. We can then use this safety net to refactor the code and make bigger changes to the application. Fail Pass Change
47. Puppeteer
48. A Node.js library that provides a high- level API for controlling Google Chrome (or Chromium) via the DevTools protocol
49. Puppeteer can run the web browser in either full mode (browser windows), or headless mode (no browser windows)
50. You can use it to… • Take screenshots of web sites • Create PDF files from web pages • Crawl a SPA and generate pre-rendered content, such as scraping a major ticketing site. • Power web spiders that fill in forms automatically • Get a timeline trace of a web site loading, and measure performance
51. Install Puppeteer will download a version of Google Chrome/ Chromium that works with the library as well as your OS. It’s a much simpler experience than trying to install Selenium.
52. Usage example
53. Puppeteer • You can use it as part of your testing strategy • It can be used inside integration services like CircleCI • You can even use it in AWS Lambda functions
54. Making Cucumber.js and Puppeteer work together
57. Puppeteer is loaded into Cucumber’s world.js file, a global context that all step definitions can access. The world.js file lives inside the features folder, and is loaded automatically when running Cucumber
58. the world.js file
59. How do we do setup and teardown with both the SPA and the API?
60. Case example Dashku
61. Dashku • A dashboard app • 1st version was built back in 2012 as a Realtime web app using a framework called SocketStream • The new version has been built as a SPA and API, with React on the frontend and Express/MongoDB/Redis on the backend. • All of the features in the app so far have been built in a Behaviour Driven Development fashion.
62. Dashku dashku-web dashku-api Backend repo Frontend repo
63. Dashku dashku-web dashku-api dashku-integration Backend repo Frontend repo E2E tests repo
64. Dashku dashku-web dashku-api dashku-integration Backend repo Frontend repo E2E tests repo
65. Dashku dashku-web dashku-api dashku-integration
66. The E2E repo needs to load the SPA and the API, as well as perform the setup and teardown of the app. But how do we do that?
67. Git submodules?
68. Docker Compose?
70. NPM • It isn’t just a package manager • You can use it to stitch together a couple of dependencies in order to achieve a larger goal • It can coordinate the setup and teardown of multiple components for testing via npm script commands • Let me show you the package.json for the dashku- integration repo
73. I can load the SPA & API as node modules
74. I can then point to local copies of the web and api repos with npm link
75. Now when I create a new product feature, I can write the tests in Cucumber, then implement the feature in the SPA, and then in the API
76. And when I need to run the tests, I can coordinate the setup across the components from one place
78. So how does Cucumber start up the Web and API repos?
79. Load the API and Web repos as Node.js modules
80. the world.js file
81. the api repo’s index.js file
82. the web repo’s index.js file
83. Managing data in the database(s)
84. Dashku uses MongoDB & Mongoose*
85. Dashku uses MongoDB & Mongoose* * but I am considering PostgreSQL and Objection.js instead
86. dashku-web dashku-api dashku-integration
87. How do I get Cucumber to directly put data into the database and clean it up during test runs?
88. Cucumber’s hooks.js file (again in the features folder and loaded automatically by Cucumber)
93. Inserting data • Seeding data happens as part of the Cucumber feature scenarios • Cucumber then loads the step definition function that matches. • The step definition code is abstracted away, for reasons that will become clearer later on. features/Login.feature features/step_definitions/common_steps.js
94. features/support/actions.js
96. The abstraction makes reading steps definitions quicker and pleasant
97. The other benefit is that you can use Node’s Async/Await to combine step definitions for a single step
99. Each of those steps has its own dedicated step definition function
100. We depend on users logging in for many scenarios
101. Ideally we don’t want to repeat those 7 lines every time we want to login a user in a Cucumber scenario.
102. Instead, we can DRY up our scenarios
103. Node’s Async/Await allows us to neatly combine multiple functions for a single step definition function
106. Making Cucumber feature files less verbose is the best way to keep everyone engaging with them
107. Selecting elements in the page to click, fill in and check that they’re there • You can use CSS selectors to get at elements • I have a nice large list of CSS selectors that are referenced from a JS object tree. • XPath support is available as well.
110. Quick demo
111. CircleCI recipe
113. Testing browsers other than Google Chrome
114. If you want to test across multiple browsers, do look at using Selenium or webdriver.io in place of Puppeteer
115. Using Cucumber.js to test things other than SPAs and APIs
116. You can use Cucumber to E2E test things like Electron apps
118. If you want to learn more…
119. There’s a chapter on it in my book
120. There’s a chapter on it in my book Also in Mandarin Chinese! Thanks to Goddy Zhao for translating
121. paulbjensen
122. ANEPHENIX My software consultancy, and I’m available for work
123. Thank You