End-to-end automated testing with real web browsers is one of the the most effective methods of ensuring that our product works for the people who rely on us to list their short term rentals.
Using WebDriver.io and other great technologies, this workshop will help us to build more confidence in the code we release, improve the experience for users, and ensure that the most critical app paths are protected. We want our customers to achieve their goals, and to protect and improve our company's revenue streams.
This workshop was first given at Expedia Group's UI Developer Conference in London, June 2018.
⚠️ This material was developed using WebDriver v4, the latest and greatest at the time, and all links point to the correct version of their docs.However, WebDriver v5 was released in Dec 2018, so please be sure to use the latest version of WebDriver in your new projects!
If you want to be ahead of the game, get your environment setup before you arrive at the workshop! You can do this by completing each section of the instructions in this main README file.
We will spend some time reviewing the steps to setting up your development environment and cloning the workshop repo from GitHub, but we won't have time to download & install everything you'll need. Please come prepared!
Here's what you'll need to get started ...
I'm using v8.9.4, but any of the "Latest LTS: Carbon" releases should be fine.
To check which version you have installed, simply run:
node --versionFor maximum fun with various versions of Node.js, I recommend installing NVM for managing your installed/active versions of Node.
Visual Studio Code is popular these days. Lots of folks prefer Atom. And Sublime Text is awesome, too. You'll just want a nice code editor to do syntax highlighting and other handy code stuff for you.
We may be using both Chrome and Firefox, so please have both installed.
It's probably pre-installed on your Mac, or there's a ton of tutorials for installing git on the interwebs, just Google for install git on mac.
Pro tip: Make life easy for yourself and get a GUI for Git. Sourcetree is free and highly useful if you're a more visual person, or if you just want to keep your command line use to a minimum.
The code has a sample web server and application, and some starter code for our end-to-end test exercises. It was created using Facebook's Create React App.
Each exercise is in its own folder, and we'll work through them one by one. For each, there will be our starter code, as well as the full solution.
The example app called "Verbo" exists in the /verbo directory. We'll run our e2e tests against this app running on http://localhost:3000.
From your terminal, in whichever directory where you prefer to create your apps:
git clone [email protected]:grantnorwood/expedia-e2e.gitFrom the Repository Browser or File menu, click New ... and choose to clone a new repo.
The SSH url to the repo is: [email protected]:grantnorwood/expedia-e2e.git
✅ Congratulations, your pre-work is done! But of course you are free to look ahead to the exercises we'll be working on ... you'll save yourself some time if you get the example application in exercise-1 up and running before the workshop begins.
Let's go!
- Exercise 1: Setup the example application
- Exercise 2: Install WebDriver.io and write your first test
- Exercise 3: Using the
wdiotest runner - Exercise 4: Adding
mochaandchai - Exercise 5: Practice with selectors and commands
- Exercise 6: The Page Object Pattern
- Exercise 7: Personas and paths
- Exercise 8: Level up