极狐GitLab自动化测试指南之UI测试【实践篇】

极小狐

1328人浏览 · 2024-05-22 11:29:55

极小狐 · 2024-05-22 11:29:55 发布

本文作者：武让

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab ：https://gitlab.cn/install?channel=content&utm_source=csdn 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。

更多关于极狐GitLab ：https://gitlab.cn 或者 DevOps 的最佳实践，可以关注文末的极狐GitLab 公众号。

学习极狐GitLab 的相关资料：

极狐GitLab 官网：https://gitlab.cn
极狐GitLab 官网文档：https://docs.gitlab.cn
极狐GitLab 论坛：https://forum.gitlab.cn/
极狐GitLab 安装配置：https://gitlab.cn/install
极狐GitLab 资源中心：https://resources.gitlab.cn
极狐 AI 研发助手：https://coderider.gitlab.cn/

搜索【极狐GitLab】公众号，后台输入加群，备注gitlab，即可加入官方微信技术交流群。

关联阅读

极狐GitLab自动化测试指南之UI测试【理论篇】

极狐GitLab 公众号后台回复新手指南，免费领取极狐GitLab 新手指南一份，从零到一快速上手极狐GitLab。

2 实践篇

2.1 极狐GitLab集成Selenium

2.1.1 编写测试脚本

以Python开发的Selenium测试脚本为例，以下代码实现了基于Chrome的Headless模式运行Selenium，包含两个测试用例，分别是模拟点击https://www.oursky.com/网站的header__logo和header__cta元素，找不到该元素时测试用例不通过。

"""
A simple selenium test example written by python
"""

import unittest
from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.common.by import By
from HtmlTestRunner import HTMLTestRunner

class TestTemplate(unittest.TestCase):
    """Include test cases on a given url"""

    def setUp(self):
        """Start web driver"""
        chrome_options = webdriver.ChromeOptions()
        chrome_options.add_argument('--no-sandbox')
        chrome_options.add_argument('--headless')
        chrome_options.add_argument('--disable-gpu')
        chrome_options.add_argument('--disable-dev-shm-usage')
        chrome_options.add_argument("--window-size=1920,1080")
        self.driver = webdriver.Chrome(options=chrome_options)
        self.driver.implicitly_wait(10)

    def tearDown(self):
        """Stop web driver"""
        self.driver.quit()

    def test_case_1(self):
        """Find and click top-left logo button"""
        try:
            self.driver.get('https://www.oursky.com/')
            el = self.driver.find_element(By.CLASS_NAME, 'header__logo')
            el.click()
        except NoSuchElementException as ex:
            self.fail(ex.msg)

    def test_case_2(self):
        """Find and click top-right Start your project button"""
        try:
            self.driver.get('https://www.oursky.com/')
            el = self.driver.find_element(By.CLASS_NAME, "header__cta")
            el.click()
        except NoSuchElementException as ex:
            self.fail(ex.msg)

if __name__ == '__main__':
    suite = unittest.TestLoader().loadTestsFromTestCase(TestTemplate)
    runner = HTMLTestRunner(combine_reports=True, report_name="index", add_timestamp=False, output='reports')
    runner.run(suite)

2.1.2 自动执行测试

将以上测试脚本放在极狐GitLab代码仓上进行管理，并创建GitLab CI/CD脚本，运行该脚本需Docker/K8S类型的GitLab Runner，参考示例.gitlab-ci.yaml如下：

stages:         
  - test
  - report

# 运行Selenium自动化测试
selenium-test-job:   
  stage: test   
  image: joyzoursky/python-chromedriver
  script:
    # 安装Python Selenium环境
    - pip install selenium
    # 安装HTML测试报告插件
    - pip install html-testRunner
    - python test_script.py
  # 上传HTML测试报告  
  artifacts:
    paths:
      - reports

# GitLab Pages展示测试报告
pages:
  stage: report
  script:
    - mkdir ./public
    - mv ./reports/* ./public/
  artifacts:
    paths:
    - public

按照UI自动化测试的运行时机，对应三种不同的情况：

当应用程序代码变更后触发测试：可在上游应用程序的CI/CD脚本中增加selenium测试项目为下游流水线，当上游应用程序代码变并更运行流水线时，会在部署完成后自动触发selenium测试项目的流水线，以执行自动化测试，从而验证应用程序本次代码变更是否可以通过回归测试。

stages:          
  - build
  - test
  - deploy
  - ui-test

build-job:       
  stage: build
  script:
    - echo "Compiling the code..."
    - echo "Compile complete."

unit-test-job:   
  stage: test   
  script:
    - echo "Running unit tests... This will take about 1 seconds."
    - sleep 1
    - echo "Code coverage is 90%"

deploy-job:      
  stage: deploy 
  script:
    - echo "Deploying application..."
    - echo "Application successfully deployed."

# 触发下游流水线
seleniumjob:
  stage: ui-test
  trigger:
    project: mycompany/test-automation/ui-test-selenium
    strategy: depend

在这里插入图片描述
2. 定时执行测试：可在项目的“CI/CD——计划”中创建定时任务以执行自动化测试。

在这里插入图片描述
3. 手动执行测试：可在项目的“CI/CD——流水线”中点“运行流水线”按钮触发流水线构建。

在这里插入图片描述

2.1.3 查看测试报告

在上述配置中，已将Selenium的测试报告以HTML格式导出，上传到GitLab制品仓，并通过GitLab Pages展示，可在该项目“设置—Pages”中找到URL链接并访问。

在这里插入图片描述

2.2 极狐GitLab集成Squish

2.2.1 安装GitLab Runner

在Squish中进行UI自动化测试就不能使用Headless模式了，需要专机专用，整体流程如下图所示：

所以需要在测试机上安装Squish，用于运行测试脚本。同时需要在测试机上安装并注册GitLab Runner，具体可参考Install GitLab Runner | GitLab ，支持x86, AMD64, ARM64, ARM, s390x, ppc64le等架构、支持Linux, Windows, macOS, FreeBSD等操作系统，支持CentOS, Debian, Ubuntu, RHEL, Fedora, Mint等Linux发行版。

注册Runner时需要给Runner设置一个Tag，用于区分，如Squish for X。

需要记录测试机的Squish安装路径、许可证路径、Squish Server的端口，后续配置流水线脚本时使用。

2.2.2 编写测试脚本

以使用Squish for QT测试QT桌面端程序为例，安装Squish、录制脚本、编写脚本，可参考Squish官方文档froglogic Squish Manual 。

编写测试用例，简单来说分3步：

设置路径：设置待测试的应用程序路径。
开启录制：按照测试流程操作应用程序，如点击按钮、输入等，随后自动生成测试脚本。
调整脚本：脚本支持Java、Python、JS、Ruby等多种语言，使其符合实际需求。

最后将整个测试项目上传到GitLab进行保存和版本控制。

在这里插入图片描述

2.2.3 自动执行测试

基于上述测试项目，创建流水线脚本，参考示例.gitlab-ci.yaml如下：

variables:
  SQUISH_DIR: "/xx/xx/xx" # 测试机Squish安装路径
  SQUISH_LICENSEKEY_DIE: "/xx/xx/xx" # 测试机Squish 许可证路径
  SQUISH_SERVER_PORT: 4325 # 测试机Squish Server Port

squish-tests:
    stage: test
    tag: Squish for X # 测试机Runner Tag
    script: 
    - echo "Starting VNC Server"
    - vncserver :$DISPLAY_NO
    - echo $SQUISH_DIR
    - echo "Starting squishserver on port=$SQUISH_SERVER_PORT..."
    - $SQUISH_DIR/bin/squishserver --port $SQUISH_SERVER_PORT 1>server.log 2>&1 &
    - sleep 5
    - echo "Register AUT..."
    - $SQUISH_DIR/bin/squishserver --port $SQUISH_SERVER_PORT --config addAUT addressbook $SQUISH_DIR/examples/qt/addressbook
    - echo "Starting tests..."
    # 运行当前目录下的测试用例并生成测试报告
    - $SQUISH_DIR/bin/squishrunner --port $SQUISH_SERVER_PORT --testsuite ~/ --exitCodeOnFail 13 --reportgen junit,junit_report.xml --reportgen html,web_report
    after_script:
    - echo "Stopping squishserver..."
    - $SQUISH_DIR/bin/squishserver --stop --port $SQUISH_SERVER_PORT &
    - echo "Stopping VNC Server..."
    - vncserver -kill :$DISPLAY_NO
    - sleep 5
    artifacts:
       when: always    
       # 生成JUnit格式报告，并在GitLab 合并请求中展示
       reports: 
          junit: junit_report.xml
       paths:
         - server.log
         - junit_report.xml
         # 生成HTML格式报告
         - web_report/
         
# GitLab Pages展示HTML测试报告
pages:
  stage: report
  script:
    - mkdir ./public
    - mv ./web_report/* ./public/
  artifacts:
    paths:
    - public

运行流水线，观察是否可以正常运行，需注意运行自动化测试期间不要在测试机上进行其他操作，以免引起测试失败。

在这里插入图片描述

2.2.4 查看测试报告

在上述配置中，同时生成了XML和HTML格式的测试报告，并且把JUnit格式XML与GitLab的集成，实现在合并请求中查看Squish的测试结果，实现方式可参考 Unit test report examples | GitLab 。

在这里插入图片描述
同时测试报告也以HTML格式导出，上传到GitLab制品仓，并通过GitLab Pages展示，可在该项目“设置—Pages”中找到URL链接并访问。

在这里插入图片描述

结束语

回顾之前的4篇文章，从测试的发展史、方法论、工具到具体的接口测试、性能测试、单元测试再到这篇UI测试，也仅仅是概括性的介绍了软件测试很小的一部分内容。软件测试在软件开发过程中依然是不可或缺的重要组成部分，它的实践落地依然是要结合企业实际的环境、时机、人员能力去综合考虑，在摸索中前进。

而对于极狐GitLab来说，主要是通过两方面将软件测试更好的融入DevOps体系：

通过极狐 GitLab 的 CI/CD把自动化测试工具集成起来。目的是要实现全面的自动化测试。开发人员提交代码或者测试脚本更新之后，就可以通过 CI/CD 立刻触发一次全面的回归测试，才能彻底解决效率问题。
通过极狐GitLab的代码合并请求将测试结果汇总起来。目的是作为代码评审的依据，作为质量门禁的载体。真正做到人人参与评审、人人为质量负责。

在这里插入图片描述
关于极狐GitLab与自动化测试实践的相关内容到这里就全部结束了，完结撒花。