TestVagrant

Contact Us

Running WebdriverIO Test on GitHub Actions CI

Running WebdriverIO test on GitHub Actions CI
  • Blog

Blog

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

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

Starting with GitHub Config

Now that we are ready with the repo. Let us now start configuring GitHub Actions.

  • Click on the Actions tab on the GitHub repo. 
get started with GitHub actions
  • 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.
				
					# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: webdriverio-ci

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

jobs:
  test:

    runs-on: ubuntu-latest

    steps:
        - name: Checkout
          uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: 16.3.0
        - name: Install
          run: npm install
        - name: Test
          run: BROWSERSTACK_USERNAME=${{secrets.BROWSERSTACK_USERNAME}} BROWSERSTACK_ACCESS_KEY=${{secrets.BROWSERSTACK_ACCESS_KEY}} npm run test
        - uses: actions/upload-artifact@v1
          if: failure()
          with:
            name: logs
            path: logs

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:

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.

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

Share This Article

Other Related Articles

See More Articles
See More Articles
Scroll to Top