如何使用 selenium 和 codeception 检测验收测试中的 dom 变化

Posted 2023-02-23

【中文标题】如何使用 selenium 和 codeception 检测验收测试中的 dom 变化

【英文标题】：How to detect dom change in acceptance testing with selenium and codeception

【发布时间】：2013-02-18 20:53:13

【问题描述】：

我正在为 Angular 编写的应用程序编写验收测试。我使用带有 selenium 的 Codeception 测试框架。测试将一些文本写入输入字段并提交表单。它应该通过 ajax api 调用向 db 添加新任务，并将新的 <li> 元素添加到现有任务列表中。 我如何检测到添加了新元素？到目前为止，这是我所得到的：

<?php
$I = new WebGuy($scenario);
$I->wantTo('add new story');
$I->amOnPage('/');
$I->fillField('input', 'asdf');
$I->pressKey('input[name=input]', '13');
// ensure that new <li> has been added?

【问题讨论】：

新元素是添加在列表末尾还是列表中间的任意位置？

添加到开头

【参考方案1】：

您可以使用以下任何方式编写代码以单击 li

//通过div标签访问

$I->click('div div div div div ul li a');
$I->see('UNIT 1');

//通过类名访问

$I->click('div[class="new"] div div div a');

//通过div ids访问

$I->click('div[id=tnList] ul li a');