使用 Jenkins + 企微机器人 + docker + cypress + allure 完成自动化测试及结果通知

原创

已于 2022-07-04 17:18:55 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#docker #jenkins #自动化

于 2022-06-07 16:24:08 首次发布

该文档描述了如何构建基于Ubuntu的Docker镜像，用于安装Cypress、Allure、Node.js、Git、Yarn等开发工具，并创建了一个用于测试的开发镜像，包含了Chrome、x11vnc、fluxbox和noVNC。镜像还集成了启动脚本start.sh，用于启动Xvfb、x11vnc、fluxbox、noVNC和Cypress测试。此外，还提供了Jenkinsfile示例，展示如何在Jenkins中执行测试并生成Allure报告。

CI 镜像

镜像定义文件： ssoor/cypress:yk-test

FROM ubuntu:latest

RUN sed -i s@/archive.ubuntu.com/@/mirrors.tuna.tsinghua.edu.cn/@g /etc/apt/sources.list

RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y curl && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install Node
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
    apt-get update && \
    apt-get install -y nodejs && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install allure
RUN curl -sL https://hub.fastgit.xyz/allure-framework/allure2/releases/download/2.17.3/allure_2.17.3-1_all.deb -o /tmp/allure_2.deb  && \
    apt-get update && \
    apt-get install -y /tmp/allure_2.deb && \
    rm -f /tmp/allure_2.deb && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install cypress-dependencies
RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y \
    libgtk2.0-0 \
    libgtk-3-0 \
    libgbm-dev \
    libnotify-dev \
    libgconf-2-4 \
    libnss3 \
    libxss1 \
    libasound2 \
    libxtst6 \
    xauth \
    xvfb && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install git
RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y git && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install yarn
RUN npm config set registry 'https://registry.npm.taobao.org' && \
    npm install -g yarn --cache /tmp/empty-cache && \
    yarn config set registry 'https://registry.npm.taobao.org' && \
    rm -rf /tmp/empty-cache

RUN useradd -ms /bin/bash  app
USER app

# Configure npm global install path
RUN npm config set prefix '~/.npm-global' && \
    npm config set registry 'https://registry.npm.taobao.org' && \
    yarn config set registry 'https://registry.npm.taobao.org'
    
ENV PATH=~/.npm-global/bin:$PATH

# Install cypress
RUN npm install -g cypress

WORKDIR /app

开发镜像

开发使用的镜像定义文件：

FROM ssoor/cypress:yk-test

USER root

RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y \
    git \
    curl \
    x11vnc \
    fluxbox && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

# Install noVNC
RUN git clone https://hub.fastgit.xyz/novnc/noVNC.git --depth 1 /usr/local/share/noVNC && \
    git clone https://hub.fastgit.xyz/novnc/websockify.git /usr/local/share/noVNC/utils/websockify && \
    ln -s /usr/local/share/noVNC/utils/novnc_proxy /usr/local/bin/novnc_proxy

# Install Chrome
RUN curl https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -o /tmp/google-chrome.deb && \
    apt-get update && \
    apt-get install -y /tmp/google-chrome.deb && \
    apt-get install ttf-wqy-microhei ttf-wqy-zenhei xfonts-wqy && \
    rm -f /tmp/google-chrome.deb && \
    apt-get clean all && rm -rf /var/lib/apt/lists/*

RUN npx cypress install

COPY start.sh /usr/local/bin/start.sh
COPY noVNC.html  /usr/local/share/noVNC/index.html

CMD ["/usr/local/bin/start.sh"]

镜像依赖文件

启动脚本：start.sh

#!/bin/bash

LANG=C.UTF-8
SCREEN_WHD="${SCREEN_WHD:-1440x900x16}"


Xvfb :20 -screen 0 "${SCREEN_WHD}" &
sleep 1
x11vnc -display :20 -forever -bg -o "/tmp/x11vnc.log"
sleep 1
DISPLAY=:20 fluxbox -log /tmp/fluxbox.log &
sleep 1
novnc_proxy --vnc localhost:5900 --listen 0.0.0.0:6080 --cert /app/ssl/root.crt  --key /app/ssl/root.key &
sleep 1

yarn
DISPLAY=:20 yarn cypress open --browser chrome

# yarn cypress run --env allure=true,allureResultsPath=results/allure -s cypress/integration/todo.spec.js
# allure serve -h 0.0.0.0 -p 1806 ./results/allure
wait

修改过的 noVNC，可选 - 可以使用官方版本。

<!DOCTYPE html>
<html lang="en" class="noVNC_loading">

<head>

    <!--
    noVNC example: simple example using default UI
    Copyright (C) 2019 The noVNC Authors
    noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
    This file is licensed under the 2-Clause BSD license (see LICENSE.txt).

    Connect parameters are provided in query string:
        http://example.com/?host=HOST&port=PORT&encrypt=1
    or the fragment:
        http://example.com/#host=HOST&port=PORT&encrypt=1
    -->
    <title>noVNC</title>

    <meta charset="utf-8">

    <!-- Icons (see app/images/icons/Makefile for what the sizes are for) -->
    <link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16x16.png">
    <link rel="icon" sizes="24x24" type="image/png" href="app/images/icons/novnc-24x24.png">
    <link rel="icon" sizes="32x32" type="image/png" href="app/images/icons/novnc-32x32.png">
    <link rel="icon" sizes="48x48" type="image/png" href="app/images/icons/novnc-48x48.png">
    <link rel="icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-60x60.png">
    <link rel="icon" sizes="64x64" type="image/png" href="app/images/icons/novnc-64x64.png">
    <link rel="icon" sizes="72x72" type="image/png" href="app/images/icons/novnc-72x72.png">
    <link rel="icon" sizes="76x76" type="image/png" href="app/images/icons/novnc-76x76.png">
    <link rel="icon" sizes="96x96" type="image/png" href="app/images/icons/novnc-96x96.png">
    <link rel="icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120x120.png">
    <link rel="icon" sizes="144x144" type="image/png" href="app/images/icons/novnc-144x144.png">
    <link rel="icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152x152.png">
    <link rel="icon" sizes="192x192" type="image/png" href="app/images/icons/novnc-192x192.png">
    <!-- Firefox currently mishandles SVG, see #1419039
    <link rel="icon" sizes="any" type="image/svg+xml" href="app/images/icons/novnc-icon.svg">
    -->
    <!-- Repeated last so that legacy handling will pick this -->
    <link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16x16.png">

    <!-- Apple iOS Safari settings -->
    <meta name="viewport" conte