我们有一个广泛的Laravel Dusk测试套件,用于我们的测试管理工具Testmo。除了我们的后台和单元测试,我们基于Dusk(Selenium)的浏览器测试使我们能够验证产品的所有功能的端到端,这意味着我们可以像用户一样测试应用程序:自动浏览器导航到页面,打开对话框,填写表格,甚至测试复杂的互动,如拖放或粘贴图像。
从我们的开发机器(或开发Docker环境)本地运行这些测试是非常容易的。你可以使用你的开发机的浏览器(例如Chrome)来运行你的测试, 或者在你的开发容器内使用chromium.Laravel Dusk也已经默认为Windows和Mac提供了一个chromedriver 二进制文件,以使Chrome浏览器很容易实现自动化。或者, 如果你使用Docker并且想使用官方的Selenium浏览器图像, 这也很容易。
但是,从我们的CI管道,如GitHub Actions,GitLab CI/CD或CircleCI运行我们的Laravel Dusk测试呢?这是非常重要的, 这样我们就可以在构建和部署一个新的应用程序版本时运行我们所有的测试.在这篇文章中,我们将看看具体的步骤,以使其发挥作用。
使用GitHub Actions运行Laravel Dusk
为了运行我们的Laravel Dusk测试,作为CI管道的一部分,我们需要访问一个浏览器,我们可以在管道运行过程中进行自动化。这通常是Chrome(即chromium ),但我们也可以轻松地使用Firefox或Edge。不管你是使用GitHub Actions、GitLab CI/CD、CircleCI、Bibucket、Jenkins还是其他服务,方法都是一样的。
为了使用我们CI管线中的浏览器,你可以简单地直接从管线配置中安装一个浏览器。但是有一个更好的方法。我们可以使用官方的Selenium Docker镜像,它预先配置了一个浏览器,加上匹配的驱动程序,这样Laravel Dusk就可以连接到它。在下面的例子中,我们将专注于GitHub Actions,但你可以使用相同的Docker容器与GitLab CI/CD, CircleCI等。
# .github/workflows/test-single.yml
name: Test
on:
workflow_dispatch:
inputs:
browser:
type: choice
description: Which browser to test
required: true
default: chrome
options:
- chrome
- firefox
- edge
jobs:
test:
name: Test
runs-on: ubuntu-latest
services:
selenium:
image: selenium/standalone-${{ github.event.inputs.browser }}
steps:
- uses: actions/checkout@v2
- run: # Your Laravel Dusk test execution goes here
env:
BROWSER: ${{ github.event.inputs.browser }}
- uses: actions/upload-artifact@v2
if: always()
with:
name: screenshots
path: screenshots/
上面的GitHub Actions工作流使用官方的Selenium镜像启动了一个单独的服务容器。当我们通过GitHub的Web界面启动管道时,它会询问我们使用哪个浏览器(Chrome、Firefox、Edge),这样我们就可以针对不同的浏览器运行测试。
我们还为我们的Laravel Dusk环境提供了一个环境变量(BROWSER),所以如果需要的话,我们可以针对特定的浏览器行为微调我们的测试。从我们的Laravel Dusk测试中,我们只需使用主机和端口selenium:4444 ,就可以连接到Selenium。你还需要在你的Laravel Dusk基类中设置Selenium能力的浏览器名称,以确保你询问正确的浏览器(你也可以使用BROWSER 环境变量)。注意: 对于Edge, 这需要MicrosoftEdge.
平行运行多个浏览器会话
上述工作流程是针对单个浏览器执行我们的测试。但利用GitHub Actions和其他CI服务,也可以很容易地并行运行多个测试作业。在我们的案例中,为什么不在同一时间针对多个浏览器运行我们的测试?
这是很容易做到的。我们可以使用 GitHub Actions 的matrix 功能,告诉它以不同的设置多次运行我们的test 工作。在我们的例子中,我们告诉 GitHub 运行我们的测试三次,一次针对 Chrome,一次针对 Firefox,一次针对 Edge。我们不需要对我们的测试工作做太大的改动。我们唯一需要改变的是,这次将我们的matrix.browser ,而不是输入设置传递给我们的Laravel Dusk测试。
# .github/workflows/test-parallel.yml
name: Test (parallel)
on: [workflow_dispatch]
jobs:
test:
name: Test
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
browser: ['chrome', 'firefox', 'edge']
services:
selenium:
image: selenium/standalone-${{ matrix.browser }}
steps:
- uses: actions/checkout@v2
- run: # Your Laravel Dusk test execution goes here
env:
BROWSER: ${{ matrix.browser }}
- uses: actions/upload-artifact@v2
if: always()
with:
name: ${{ matrix.browser }}
path: screenshots/
当我们现在运行我们的工作流程时,GitHub Actions会并行地启动我们的test 工作三次。对于每个工作,它将启动一个不同的Selenium服务容器和正确的浏览器。在我们的Laravel Dusk测试中,Selenium总是可以在selenium:4444 。 下面是GitHub Actions中多个并行测试工作的样子。

向测试管理部门报告测试结果
我们也可以将Laravel Dusk测试的结果报告给测试工具,比如我们的Testmo,这样我们就可以很容易地看到我们的浏览器测试的所有测试结果,与我们的团队分享结果,并轻松识别(和修复!)脆弱的,缓慢的或损坏的测试。报告我们的测试结果的另一个好处是,我们可以在一个中央工具中一起管理我们的自动化测试和测试用例管理以及探索性测试。下面是测试自动化运行在Testmo中的样子。

当你提交你的自动化测试到一个测试工具时,你也可以轻松地归档和审查过去的测试结果,并将它们链接到里程碑。因此,你总是可以快速参考和查看过去的结果,如果你只把测试结果保存在CI服务中,这将是相当困难的。

这篇客座文章是由Testmo的创始人之一Dennis Gurock撰写的。Testmo是用Laravel构建的,并广泛使用Laravel Dusk。