Setting up WebdriverIO Mocha Framework With Docker, GitHub Actions and Allure.

There’s quite a few different technologies at work, but we’re going to assume you have and can use, Git, VS Code, Git Bash. We’ll begin starting off with setting up WebdriverIO, Mocha, and Allure.

In your main directory, in the bash terminal, enter this to begin the instillation of WebdriverIO and Mocha for the WebdriverIO Command Line Interface.

    npm install @wdio/cli

After, begin the configuration with

    npx wdio config

These are the following options to choose:

Press space to select:

Choose more here if you need them:

From here you can begin to add tests to your spec files or just use the default ones made in the configuration. Test out the default tests by typing in

    npm run wdio

Next, you want to configure your wdio.conf.ts file correctly to work with the runners and services like Docker and Allure. I’m using the default port for docker for now:

    services: [
            ['docker', {
                // Docker options
                image: 'selenium/standalone-chrome',
                healthCheck: 'http://localhost:4444',
                options: {
                    p: ['4444:4444'],
                    // Add other Docker options here
                },
                // Add other wdio-docker-service configurations here
            }],
        ],

Configure your reporter to this:

    reporters: [
            'spec',
            ['allure', {
              outputDir: 'allure-results',
              disableWebdriverStepsReporting: true,
              disableWebdriverScreenshotsReporting: false,
            }],
            ],

Next, you’ll want to get your package.json file set up for using Allure, Mocha, and Chrome:

    {
      "name": "my-new-project",
      "type": "module",
      "devDependencies": {
        "@wdio/allure-reporter": "^8.27.0",
        "@wdio/cli": "^8.26.1",
        "@wdio/local-runner": "^8.26.1",
        "@wdio/mocha-framework": "^8.24.12",
        "@wdio/spec-reporter": "^8.24.2",
        "allure-commandline": "^2.25.0",
        "allure-mocha": "^2.10.0",
        "chromedriver": "^119.0.1",
        "ts-node": "^10.9.1",
        "typescript": "^5.3.3",
        "wdio-chromedriver-service": "^8.1.1",
        "wdio-docker-service": "^3.2.1",
        "wdio-wait-for": "^3.0.9"
      },
      "scripts": {
        "wdio": "wdio run ./wdio.conf.ts",
        "allure:report": "allure generate allure-results --clean"
      },
      "dependencies": {
        "allure": "^0.0.0",
        "string-width": "^6.1.0"
      },
      "mocha": {
        "parallel": false,
        "reporter": "allure-mocha",
        "reporterOptions": {
          "resultsDir": "allure-results"
        }
      }
    }

Now you should have Docker installed, and create a Dockerfile with this configuration. Use environment variables to open the port you want:

    # Use an official Node runtime as a parent image
    FROM node:latest
    
    # Install Chrome for running tests
    RUN apt-get update && apt-get install -y wget gnupg2
    RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
    RUN apt-get update && apt-get install -y google-chrome-stable
    
    # Install other dependencies
    RUN apt-get install -y libnss3 libgconf-2-4 libfontconfig1
    
    # Set the working directory in the container
    WORKDIR /usr/src/app
    
    # Copy the current directory contents into the container at /usr/src/app
    COPY . .

    # Expose the port dynamically
    EXPOSE $PORT
    
    # Install any needed packages specified in package.json
    COPY package*.json ./
    RUN npm install
    
    # Run WebdriverIO tests when the container launches
    CMD ["npx", "wdio", "wdio.conf.ts"]

Next, you’ll create a folder called .github which contains a folder called workflows, then create a file called main.yml. Here is the configuration to install ubunutu, build a Docker image, run the Docker image, and share the allure-results folder with your Github Actions CLI. This will use a default security token from Github, and create an artifact that it shares between the Docker Image and the Github Actions CLI:

    name: CI

    on:
      push:
        branches: [ main ]
      pull_request:
        branches: [ main ]
    
    jobs:
      build-and-run:
        runs-on: ubuntu-latest
    
        steps:
        - uses: actions/checkout@v2
    
        - name: Build the Docker image
          run: docker build . --file Dockerfile --tag your-docker-image-name-here
    
        - name: Run the Docker image
          run: docker run -v ${PWD}/allure-results:/usr/src/app/allure-results -p 4444:4444 your-docker-image-name-here || true
    
        - name: Upload Allure results
          uses: actions/upload-artifact@v2
          with:
            name: allure-results
            path: ./allure-results
      
        - name: Download Allure results
          uses: actions/download-artifact@v2
          with:
              name: allure-results
    
        - name: Install Allure CLI
          run: npm install -g allure-commandline
    
        - name: Generate Allure Report
          run: npm run allure:report
    
        - name: Deploy to GitHub Pages
          uses: peaceiris/actions-gh-pages@v3
          with:
            github_token: $
            publish_dir: ./allure-report
            publish_branch: gh-pages

To configure github, you’ll want to go to the settings and pages, and make sure you have this as set up for the default Github Pages:

Go to settings, Actions, then General and set your permissions to this:

Now in your bash terminal do “git add .”, then git commit -m “your commit name”, and git push to see it run your Docker container, test suite, and create your allure report on the gh-pages branch hosted by github pages. I have a purposefully added a failed test to show it will run even if one of the tests fails:

Now you can configure Allure, the framework, and other github permissions as needed.