在 Gitlab CI 上运行 Nightwatch 测试

在本文中，您将学习如何在 Gitlab CI 上创建和运行 Nightwatch 测试

概述

Gitlab CI 是一个 CI/CD 平台，可用于创建自动化测试管道。这些管道可用于在相同实例或云服务提供商（如 BrowserStack & Sauce Labs）上执行测试。

先决条件

Gitlab CI 帐户
上传到 Git 的 Nightwatch 项目

设置指南

我们将以 nightwatch-examples 存储库为例进行演示。现在，让我们按照以下步骤配置 CI

步骤 1：设置 Gitlab CI 项目

登录到您的 Gitlab CI 帐户后，点击“新建项目”。您将看到以下选项

Gitlab CI Project options

点击“为外部存储库运行 CI/CD”，因为我们要针对来自 Github 的存储库运行管道。

在下一个屏幕上，输入 Github URL，其中包含您的测试和 package.json 文件。输入其他详细信息（如项目名称和 URL），然后点击 创建项目，如下所示

Gitlab CI Github

这样，您的 Gitlab CI 项目设置就完成了。

步骤 2：更新 nightwatch.conf.js 文件

在 chrome 环境下的 google chrome 选项中添加 --no-sandbox 和 --disable-dev-shm-usage 参数

chrome: {
    desiredCapabilities : {
    browserName : 'chrome',
    'goog:chromeOptions' : {
        // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
        //
        // w3c:false tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
        w3c: true,
        args: [
        '--no-sandbox',
        '--disable-dev-shm-usage'
        //'--ignore-certificate-errors',
        //'--allow-insecure-localhost',
        //'--headless'
        ]
    }
},

步骤 3：更新 .gitlab-ci.yml 文件，提交并运行管道

点击 CI/CD -> 编辑器。创建一个新的 gitlab-ci.yml 文件，并将以下文件内容复制到该文件中

# This file is a template, and might need editing before it works on your project.
# You can copy and paste this template into a new `.gitlab-ci.yml` file.
# You should not add this template to an existing `.gitlab-ci.yml` file by using the `include:` keyword.
#
# To contribute improvements to CI/CD templates, please follow the Development guide at:
# https://docs.gitlab.com/ee/development/cicd/templates.html
# This specific template is located at:
# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Nodejs.gitlab-ci.yml

# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:14.19.0

cache:
  paths:
    - node_modules/

test_async:
  before_script:
    - apt-get update -q -y
    - apt-get --yes install xvfb
  script:
    # Installing Google Chrome
    - curl -sS -L https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
    - echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
    - apt-get update -q -y
    - apt-get install -y google-chrome-stable
    # Installing chromedriver
    - npm install chromedriver

    # Installing Geckodriver
    - npm install geckodriver

    # installing all the packages
    - npm install 
    # Ensuring everything is installed
    - ./node_modules/.bin/chromedriver --version
    - ./node_modules/.bin/nightwatch --version
    - /usr/bin/google-chrome --version
    # Install display manager
    - Xvfb -ac :99 -screen 0 1280x1024x16 &
    - export DISPLAY=:99
    # Run nightwatch tests
    - npx nightwatch tests/ecosia.js --env chrome

复制 config.yml 文件后，点击 提交并运行

让我们尝试了解配置文件的关键要点：-