yii2框架基于codeception进行WEB-UI自动化测试

沙蒿同学
108 阅读4分钟

可通过官网地址codeception.com/docs/Accept…进行学习，官网说得很清楚，本文只是学习记录，友情提示：结合GPT高效学习。

准备工作

1、安装 Codeception

您可以使用 Composer 在项目中安装 Codeception。在终端中进入项目根目录，然后运行以下命令：

composer require "codeception/codeception" --dev

2、初始化测试套件

在项目根目录中，使用以下命令初始化测试套件：

vendor/bin/codecept bootstrap

这会创建一个 tests 目录，并在其中创建一些默认的测试文件和配置文件。

3、配置测试套件

您需要根据您的项目需求配置测试套件。在 tests 目录中，有一个名为 codeception.yml 的配置文件，其中包含了测试套件的配置信息。您可以根据需要修改该文件。

一旦您完成了上述准备工作，就可以执行 php vendor/bin/codecept build 命令来构建测试套件了。该命令将根据测试套件的配置信息生成测试文件和测试类，并将其保存在 tests/_support 目录中。

4、WebDriver下载

WebDriver是一种用于自动化Web浏览器的工具，可以模拟用户在浏览器中的操作，如点击、输入、滚动等。在使用AcceptanceTester进行WebDriver测试之前，需要安装WebDriver，并确保WebDriver可以与测试框架进行交互。

本人经过查询资料得知mac安装方法，其他系统请读者自行百度或GPT一下(备注：确有需要留言出教程)

在 Mac 系统上，您可以通过以下步骤下载和启动 Selenium WebDriver：

// 下载
curl -O https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar

// 启动,跟上面下载同一目录（java自行安装哦）
java -jar selenium-server-standalone-3.141.59.jar

出现以下你就成功啦

16:49:15.970 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358

16:49:16.093 INFO [GridLauncherV3.lambda$buildLaunchers$3] - Launching a standalone Selenium Server on port 4444

2023-08-11 16:49:16.160:INFO::main: Logging initialized @566ms to org.seleniumhq.jetty9.util.log.StdErrLog

16:49:16.435 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet

16:49:16.587 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444

5、浏览器驱动下载

WebDriver需要与浏览器进行交互，因此需要安装对应浏览器的驱动程序。常见的浏览器驱动程序包括ChromeDriver、GeckoDriver、SafariDriver等。在使用AcceptanceTester进行WebDriver测试之前，需要安装对应浏览器的驱动程序，并将其配置到测试框架中。

根据你本地谷歌浏览器下载对应的浏览器驱动版本：chromedriver.storage.googleapis.com/index.html

加载到全局命令bin中 export PATH=$PATH:/path/to/chromedriver

我的谷歌浏览器版本是115.0.5790.170，则下载最新的驱动版本114.0.5735.90也可以的

image.png

驱动链接：chromedriver.storage.googleapis.com/index.html?…

image.png

114版本之后的chromedriver下载地址为：googlechromelabs.github.io/chrome-for-…

6、测试框架中WebDriver模块下载

Codeception的WebDriver模块是通过codeception/module-webdriver包来实现的。要使用WebDriver进行测试，需要先安装该模块。可以通过Composer进行安装，命令如下：

composer require codeception/module-webdriver --dev

安装完成后，在测试框架的配置文件中指定WebDriver模块即可开始使用。例如，在acceptance.suite.yml中添加以下配置：

actor: AcceptanceTester
modules:
    enabled:
        - WebDriver:
            url: 'http://127.0.0.1:91/'
            browser: 'chrome'

注上面准备工作有点多，很多人看看就放弃了吧，以下继续。

Acceptance测试配置

acceptance.suite.yml是Codeception测试框架中的一个配置文件，用于配置acceptance测试套件的相关设置。

在测试框架的配置文件（如acceptance.suite.yml）中，需要配置WebDriver相关的模块和参数。常见的配置项包括：

  • WebDriver模块：用于与WebDriver进行交互。
  • url参数：指定测试的URL地址。
  • browser参数：指定使用的浏览器类型（如Chrome、Firefox等）。
  • window_size参数：指定浏览器窗口大小。
  • capabilities参数：指定WebDriver的其他参数，如启用无头模式、设置代理等。

以下是我的参考配置：

actor: AcceptanceTester
modules:
    enabled:
        - Filesystem
        - Asserts
        - WebDriver:
            url: 'http://127.0.0.1:91/'
            browser: 'chrome'
        - REST:
            # API 基础 URL
            url: /
            # 请求头信息
            headers:
            - {name: 'Content-Type', value: 'application/json'}
            # 响应断言
            depends: Yii2

WEB-UI自动化测试脚本开发

AcceptanceTester是Codeception测试框架中的一个actor（测试人员），用于执行web ui自动化测试。其原理主要包括以下几个步骤：

  1. 使用WebDriver模块启动浏览器，并打开测试网站。
  2. 使用页面对象模式（Page Object Pattern）定义页面元素和操作方法，以便在测试中调用。
  3. 在测试用例中使用AcceptanceTester对象调用页面对象的操作方法，执行自动化测试。
  4. 测试完成后，使用断言方法验证测试结果是否符合预期。
  5. 测试结束后，关闭浏览器。

总的来说，AcceptanceTester执行web ui自动化测试的原理是通过模拟用户在浏览器中的操作，自动化执行测试用例，并验证测试结果是否符合预期。这样可以大大提高测试效率和准确性，减少人工测试的工作量。

比如说我有这样一个页面，需要做这个页面做一个UI自动化测试

image.png

代码（部分）：

<?php
class PreviewCest
{
    //java -jar selenium-server-standalone-3.141.59.jar需要打开selenium服务，还有安装谷歌开展
    public $authId;
    public $attId;
    public $fileName;
    public $fileExt;
    public $fileSize;
    public $fileSizeFmt;
    public function _before(AcceptanceTester $I){
         $config = require(__DIR__ . '/../../config/test.php');
         new \yii\web\Application($config);
         //忽略一些代码
    }
    protected function alertAction(AcceptanceTester $I, $content, $wait = 1){
        $I->executeJS("alert('Testing ".$content."');");
        $I->wait($wait);
        $I->acceptPopup(); // 点击弹窗上的“确认”按钮
    }
    public function previewFileName(AcceptanceTester $I)
    {
        $I->wantTo('打开预览页面，查看文件名称');
        
        //打开预览页面
        $I->amOnPage('/preview?id=' . $this->authId);

        $this->alertAction($I, '打开预览页面，查看文件名称是否正确');

        $I->see($this->fileName.'.'.$this->fileExt. '（'.$this->fileSizeFmt.'）', ['css'=>'.top-div-filename']);

        $I->see('如果页面提示签名过期，请点击这里', ['css' => 'body .top-div-info']);
        
        $I->wait(3);


        $iframe = $I->grabMultiple('iframe', 'src');

        // 获取 src 属性的值
        $src = $iframe[0];
        $I->assertNotEmpty($src, 'src should not be empty');

        $this->alertAction($I, '加载iframe src内容，请求src中链接内容');

        //加载iframe src内容
        $I->amOnUrl($src);
        $I->wait(1);

        $iframe = $I->grabMultiple('iframe', 'src');
        $src = $iframe[0];
        $I->assertNotEmpty($src, 'src should not be empty');

        $content = file_get_contents($src);

        $I->assertNotEmpty($src, $content);

        $this->alertAction($I, 'end');

    }
}

执行以下命令即可运行测试：(注意acceptance大小写）

php vendor/bin/codecept run acceptance

或者

php vendor/bin/codecept run acceptance PreviewCest

执行效果截图：

image.png

输出报告

php vendor/bin/codecept run acceptance --debug --html

执行run 可配置输出报告参数，官网链接查看codeception.com/docs/Report…

清晰的报告提供了系统当前状态的全貌。哪些测试通过了，哪些测试失败了，如果失败的原因是什么。报告的详细程度和收集的技术信息各不相同。Codeception 提供内置报告器和可定制的 API，以便创建自己的报告器。

codecept-cli.png

比如我经常使用的,可查看代码执行过程中你程序输出的埋点日志，比如Yii框架就是Yii:info("this is a info");最后还有一个html的测试结果报告，一般报告文件路径在tests/_output/report.html

codeception-html.png

其他系列文章

avatar
文章
阅读
粉丝