Running WebdriverIO test on Github Actions CI

This blog intends to share details around Gitlab actions & how to integrate them with WebDriver IO tests.

Understanding Github Actions

GitHub Actions is a continuous integration and continuous delivery — (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository or deploy merged pull requests to production.

Pre-Requisites

• WebDriverIO project added as a GitHub repo.
• Browserstack account — (If you don't have an account, create a free account at https://www.browserstack.com/users/sign_up)

If you don't have a WebDriverIO project you can clone one from my WebDriverIO Repo.

Starting with Github Config

Now since we are ready with the repo. Let us now start configuring Github Actions.

• Click on the Actions tab on the GitHub repo.

• Now click on configure button on ‘Publish Node.js Package’

• Now you will be able to see the .yml file is getting created. Add below data in the .yml file.

Note: Since it is a .yml file. Please take extra care of the indentations

Breaking down the .yml file

name: webdriverio-ci

This is the name of the CI Job, You can modify it as per your liking.

on: 
push: branches: [ master ]
pull_request: branches: [ master ]

Here we are actually defining a rule that on every push or pull start running this job on the master branch

jobs: test: runs-on: ubuntu-latest

We are instructing GitHub actions to spin up the latest ubuntu instance for us where we can execute our tests.

steps:
- name: Checkout          
  uses: actions/checkout@v2        
- uses: actions/setup-node@v1          
with:            
node-version: 16.3.0

In steps, we are checking out our code and setting up the node instance.

run: npm install

Here we are installing all the dependencies that we had mentioned in our package.json file in the WDIO repo.

run: BROWSERSTACK_USERNAME=${{secrets.BROWSERSTACK_USERNAME}} BROWSERSTACK_ACCESS_KEY=${{secrets.BROWSERSTACK_ACCESS_KEY}} npm run test

Here we are running the test on Browserstack but you can use any other tool like Docker, Saucelabs and etc as well to run your test.

Now click on Start commit > add a comment and > commit new file.

Your file is now committed to GitHub but it will fail as we have not added the Browserstack credentials.

Storing creds on Github secrets

As you can see we are using BrowserStack to run our test. Hence we will need to pass its credentials as well.

GitHub gives an option to store this in encrypted format as environment variables and once stored it will be available to use in GitHub Actions workflows.

To store/create secret in Github actions.

Head to the repo setting > secret > Actions > New repo secret > Add name & Value.

Once saved it will look like this

Now the Access key and Username both are available as an environment variable to the job.

So now on every push and pull you can see a job will be triggered and you can see the logs as well under the Actions tab.

This is it we have successfully integrated GitHub Actions-CI with our WebDriverIO test.

Other use cases

• Scheduling jobs execution
• Running test inside docker in Github Workflow

References:

Github Actions | WebdriverIO

GitHub - browserstack/github-actions: A collection of GitHub Actions for BrowserStack. For internal…