Integrate WebDriverIO Script with GitHub Actions – WDIO 103

Hello,

In our previous articles, we learned how to create a WebdriverIO Web automation project and explored the config files. Now we will integrate our script with GitHub Actions, so when we have a Pull Request in our project, automation scripts will be executed, and we’ll ensure that everything is up and running.

You can also read a previous article about GitHub Actions 101

GitHub Action Configuration

You need to set up a Yaml file that describes your workflow to install dependencies and execute test suites. So let’s create a Yaml file under ./.github/workflows/folder in our project. You can copy-paste the below script into your YAML file.

name: Continuous Integration

on:
  push:
    branches:
      - '**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      // We install necessary drivers so we can run our tests
      - name: Install Chromium
        run: sudo apt-get install chromium-browser
     // We need to checkout current branch
      - uses: actions/checkout@v2
     // As it's a NodeJS project, we need to setup NodeJS into our enviornement
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 18.x
     // We did not check node_modules directory to GitHub so we need to install dependencies
      - run: npm install
        name: Install dependencies
     // We execute our test execution command
      - run: npx wdio test/wdio.conf.ts
        name: Running E2E tests

When you push that file to GitHub, you will see some activities under the Actions tab, and your tests will fail.

The reason is that we executed the tests in a real browser, but as GitHub Action does not support Graphical User Interface, we need to run our test in headless mode.

So let’s make a small change to our wdio.conf.ts file as below. Now GPU is disabled and headless mode is set up. We can also setup windows size as additional info :)

capabilities: [{
  
       maxInstances: 5,
       browserName: 'chrome',
       acceptInsecureCerts: true,
       'goog:chromeOptions': { 
           args: ["--headless", "user-agent=...","--disable-gpu","--window-size=1440,735"]
      }
   }],

Let’s push our code to GitHub and see the results.

Here we are; tests are properly executed. Let’s meet in our next webdriverIO article!

Source Code can be accessed via this link.