基于Playwright自动化测试部署方案

方案概述

基于playwright框架，搭建了自动化测试项目，在服务器上使用Docker起容器跑镜像，镜像内容基于playwright的官方镜像，并向其中移入了host文件，以便切换测试用例运行所在的环境（测试/线上环境）。

引入测试用例的管理后台，方便测试用例与测试报告的管理。管理后台中可以使用Docker官方提供的远程api创建并运行容器来跑测试用例，也能在管理后台上能看到最终的测试报告。

整体流程图

镜像构建与容器启动

基于playwright的官方镜像，在容器启动前做一些前置动作（entry.sh）。

Dockerfile

FROM mcr.microsoft.com/playwright:v1.24.2-focal
# 设置时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /
USER root
ENTRYPOINT ["/shareDir/entry.sh"]
#第一个是分支名称，第二个是测试用例名称
CMD ["master", "share3d"]

entry.sh

#!/usr/bin/env bash

echo "准备环境"
cat /shareDir/hosts >> /etc/hosts
mkdir /root/.ssh
rm -f /root/.ssh/id_rsa /root/.ssh/id_rsa.pub
cp /shareDir/id_rsa /root/.ssh
cp /shareDir/id_rsa.pub /root/.ssh
cp /shareDir/known_hosts /root/.ssh
chmod 0600 /root/.ssh/id_rsa
chmod 0600 /root/.ssh/id_rsa.pub
chmod 0600 /root/.ssh/known_hosts

echo "克隆仓库"
git clone -b $1 <仓库地址>

echo "当前分支"
cd automationtestcase
git status

echo "安装依赖"
npm install

echo "跑用例"
npm run test:$2

echo "传输结果"
a="/automationtestcase/report@$(date "+%Y-%m-%d-%H:%M:%S")"
mv /automationtestcase/playwright-report $a

scp -r $a root@公网ip:/usr/www/tumax-automationtestcase-report/$2/

Docker配置远程API调用控制

1、修改配置

vi /lib/systemd/system/docker.service

2、找到 ExecStart 配置项，在其中插入监听选项：-H tcp://0.0.0.0:5678（如果是内网生产环境，请将 0.0.0.0 改为内网 IP），最后为：

ExecStart=/usr/bin/dockerd -H unix://var/run/docker.sock -H tcp://0.0.0.0:5678

3、重启docker后，查看5678端口

systemctl daemon-reload
systemctl restart docker 

[root@localhost system]# netstat -nutlp | grep 5678
tcp6       0      0 :::5678                 :::*                    LISTEN      114226/dockerd

管理后台远程调用

官方文档

直接调用接口会出现跨域问题，需要在项目配置和nginx上配置代理（或者直接在nginx下做一层代理也可以，这里就不做代码展示了）

// vite.config.ts
export default () => {
	...
  server: {
    ...
    proxy: {
      ...
      '^/dockerContainer/.*': {
        target: 'http://公网ip:5678',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dockerContainer/, ''),
      },
    },
  },
	...
}

# /usr/local/openresty/nginx/conf/vhost/tumaxautotest.conf
location /dockerContainer/ {
  proxy_pass http://公网ip:5678/;
}

需要注意的问题

1、启动测试用例后会占用比较多的资源，注意服务器负载情况，避免影响到其他的服务。

2、服务器性能不够，会导致测试用例卡死的情况，如果运行的是比较大型的web项目，需要提前注意一下。

结果展示