E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer

Presented at London Node User Group April 2018 meetup

Transcript

1. End-to-end Testing Single Page Apps & APIs with Cucumber.js & Puppeteer Paul Jensen
2. SPAs are a popular approach API Web App Mobile App 3rd Party API consumer Databases
3. But testing them is not simple API Web App Mobile App 3rd Party API consumer Databases
4. E2E Testing a SPA needs • The Single Page App • The API that serves the SPA • The databases that serve the API • The data in the databases for testing
5. An E2E testing strategy…
6. Needs to handle loading those components
7. Needs to coordinate the setup and teardown of the application’s state across components
8. Needs to be flexible enough to handle changes to those components over time
9. Today I want to talk about a testing strategy* * there are many testing strategies
11. Cucumber
12. A Behaviour-Driven-Development (BDD) tool for describing how an application should work, in terms of features
13. The description of the application’s features is used to run automated tests
14. It becomes a safety net to catch bugs and prevent regressions
15. It also provides living documentation on the app that is accessible to everyone
16. Cucumber in 7 steps
17. Step 1 In a Node.js app, install cucumber as a development dependency
18. Step 2 Create a folder in your app called “features”. We will put cucumber-related files and folders in here. features
19. 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.
20. 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.
21. Step 4 - an example
22. 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.
23. 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
24. Step 5 - step definitions
25. 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.
26. Step 5 - step definitions
27. 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
28. 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
29. 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
30. Puppeteer
31. A Node.js library that provides a high- level API for controlling Google Chrome (or Chromium) via the DevTools protocol
32. Puppeteer can run the web browser in either full mode (browser windows), or headless mode (no browser windows)
33. 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
34. 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.
35. Usage example
36. 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
37. Making Cucumber.js and Puppeteer work together
40. 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
41. the world.js file
42. How do we do setup and teardown with both the SPA and the API?
43. Case example Dashku
44. Dashku • A dashboard app • 1st version was built back in 2012 as a Realtime web app using a framework called SocketStream • The new version is being built as a SPA and API, with React on the frontend, and Express/MongoDB/Redis on the backend. • This time I wanted to build it using BDD from the start
45. Dashku dashku-web dashku-api Backend repo Frontend repo
46. Dashku dashku-web dashku-api dashku-integration Backend repo Frontend repo E2E tests repo
47. Dashku dashku-web dashku-api dashku-integration Backend repo Frontend repo E2E tests repo
48. Dashku dashku-web dashku-api dashku-integration
49. The E2E repo needs to load the SPA and the API, and do setup/teardown But how do we do that?
50. Git submodules?
51. Docker Compose?
53. 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
56. I can load the SPA & API as node modules
57. I can then point to local copies of the web and api repos with npm link
58. 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
59. And when I need to run the tests, I can coordinate the setup across the components from one place
61. So how does Cucumber start up the Web and API repos?
62. Use index.js in both the web and api repos
63. the web repo’s index.js file
64. the api repo’s index.js file
65. I then load the Web and API repos in a world.js file from earlier.
66. the world.js file
67. Managing data in the database(s)
68. Dashku uses MongoDB & Mongoose*
69. Dashku uses MongoDB & Mongoose* * but I am considering PostgreSQL and Objection.js instead
70. Remember…
71. dashku-web dashku-api dashku-integration
72. How do I get Cucumber to directly put data into the database and clean it up during test runs?
73. Cucumber’s hooks.js file (again in the features folder and loaded automatically by Cucumber)
78. 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
79. features/support/actions.js
81. The abstraction makes reading steps definitions quicker and pleasant
82. The other benefit is that you can use Node’s Async/Await to combine step definitions for a single step
84. Each of those steps has its own dedicated step definition function
85. We depend on users logging in for many scenarios
86. Ideally we don’t want to repeat those 7 lines every time we want to login a user in a Cucumber scenario. That would make reading those feature files…
87. cumbersome!
88. Instead, we can DRY up our scenarios
89. Node’s Async/Await allows us to neatly combine multiple functions for a single step definition function
92. Making Cucumber feature files less verbose is the best way to keep everyone engaging with them
93. 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 will be coming in the next release of Puppeteer (~ 3 weeks time)
96. Quick demo
97. CircleCI recipe
99. Testing browsers other than Google Chrome
100. If you want to test across multiple browsers, do look at using Selenium or webdriver.io in place of Puppeteer
101. Using Cucumber.js to test things other than SPAs and APIs
102. You can use Cucumber to E2E test things like Electron apps
104. If you want to learn more…
105. There’s a chapter on it in my book
106. There’s a chapter on it in my book Also in Mandarin Chinese! Thanks to Goddy Zhao for translating
107. paulbjensen
108. Thank You