WDIO Test Script
#
What you’ll learn
- What is a Werbdriver.IO
- How to write our first Webdriver.IO test script
- How to deploy into Kubernetes
#
Get startedCanarytrace is a dockerized stack for testing and monitoring vitality of web applications. Use a test frameworks mocha and Webdriver.IO and if you have some test cases for Webdriver.IO, you can run them in Canarytrace. Canarytrace does not change the Webdriver.IO code in any way.
Canarytrace adds features for non-invasive / agent-less monitoring of performance and high availability of web applications, equipment for undistorted and accurate measurements from cloud and without vendor-lock e.g. Kubernetes deployments, live reporting a lot of data from a browser for investigation of performance issues, implements tools such as Lighthouse for performance audit, settings for Elasticsearch and Kibana for the operators, testers or managers.
For user-journey Canarytrace use Webdriver.io
#
Browser CapabilitiesWDIO for start goog:chromeOptions
use these flags, which help faster start the browser.
#
How user-journey mode workCanarytrace can run in modes smoke
or user-journey
and only user-jourey mode use Webdriver.io monitor script. Monitor script is useful for monitoring user flow, e.g. buying process.
Workflow
- Write your first monitor script for test framework Webdriver.io
- Push your test case in your Git repository
- Setup Git environment variables in your
user-journey.yaml
- Run Canarytrace in Kubernetes and your Git repository will be pulled automatically into Docker container with Canarytrace. In the next step will switch onto your monitor script by Git revision and will be run.
#
Write your first monitor scriptIf you want monitoring user journey, you must prepare test case / monitoring script based on testing framework Webdriver.io.
Webdriver.io is a testing framework written in javascript and it's installation is very simple.
#
Install and prepare Webdriver.IO1). Install node.js
- Please use LTS (recommended version) of Node.js
2). Install Webdriver.IO
- Prepare package.json
npm init --yes
- Install Webdriver.IO
npm install @wdio/cli --save
- For more info: Getting Started with Webdriver.IO
3). Configuration of Webdriver.IO
- run configuration
npx wdio config
4). Configuration steps
Where is your automation backend located?
= selectOn my local machine
and confirmWhich framework do you want to use?
= selectmocha
and confirmDo you want to use a compiler?
= selectBabel
and confirmWhere are your test specs located?
only confirmDo you want WebdriverIO to autogenerate some test files?
typey
and confirmDo you want to use page objects
typen
and confirmWhich reporter do you want to use?
= selectspec
and confirmDo you want to add a service to your test setup?
= selectchromedriver
and confirmWhat is the base url?
= only confirmDo you want me to run npm install?
= yes
🎉 Great, Webdriver.IO is ready with including a demo test.
What is installed?
node_modules
dependencies and packagespackage.json
version of dependenciestest
contains our first demo test casewdio.conf.js
configuration
#
Run demo test- In this same directory run your test
npx wdio run wdio.conf.js
More info on Webdriver.IO documentation
#
Run Canarytrace in KubernetesCanarytrace is designed for running in a Kubernetes and we have ready deployment objects.
1). Create namespace
kubectl create namespace canarytrace
2). Deploy your private ssh key to Kubernetes
- Create ssh key withtout passphrase via
ssh-keygen
- Upload public key
/Users/rdp/.ssh/id_ed25519.pub
to your Github - Create secret, which will contains your private ssh key
- Download and edit
user-journey.yaml
from Canarytrace Docker image. - Create deployment
kubectl -n canarytrace create -f canarytrace.yaml
#
Environment variablesThis ENV are useful for setup Canarytrace behavior, switch edition, setup credentials to repository or elasticsearch etc. Some ENV have a default value, there's no need to set them.
USER
- username used in your test case viabrowser.config.username
PASS
- password used in your test case viabrowser.config.password
Example
BASE_URL
- start URL and in test use onlybrowser.url('/');
and in your test case use only /
in browser.url() method
#
What next?
Do you find mistake or have any questions? Please create issue, thanks 👍