selenium - 在 Codeception Webdriver 中验证 CSS 值

Question

我想在 Codeception 验收测试中使用 selenium Webdriver 从 CSS 样式表中验证元素已通过绝对位置移动的像素数量。在我的示例中，当背景图像绝对位于右侧 50 像素时，界面显示元素为“打开”。

虽然 Codeception 没有将此作为默认命令，但您可以使用 ExecuteInSelenium 或 Helper，我相信这将允许此操作。

为 ExecuteInSelenium 的 Codeception 提供的示例是:

$I->executeInSelenium(function(\WebDriver $webdriver) {
  $webdriver->get('http://google.com');
});

我要在元素上验证的 CSS 值的示例是“正确”值。

.on_switch {
    position: absolute;
    right: 50px;
}

HTML 元素被列为:

<div class="on_switch"></div>

由于重复的类名，在其他元素上，我需要使用 Xpath 并相信以下内容将为我提供像素数的值，但我不确定如何验证该值是否为 50px 以允许测试的这一步通过.

$I->executeInSelenium(function(\WebDriver $webdriver) {
  $webdriver->driver.findElement(By.xpath("myxpath")).getCssValue("right");
});

我很难在网上找到示例，不胜感激。

Answer 1

是的，你可以，尝试这样的事情:

$asserts = new \Codeception\Module\Asserts;

// Example 1: position, element found with XPath
$foo = $I->executeInSelenium(function(\WebDriver $webdriver) {
    return $webdriver->findElement(WebDriverBy::xpath('//*[@id="sidebar"]'))->getCSSValue('right');
});

codecept_debug( $foo );
$asserts->assertEquals( $foo, '-360px' );

// Example 2: background colour, element found with CSS
$bar = $I->executeInSelenium(function(\WebDriver $webdriver) {
    return $webdriver->findElement(WebDriverBy::cssSelector('#sidebar'))->getCSSValue('background-color');
});

codecept_debug( $bar );

$asserts->assertEquals( $bar, 'rgba(73, 73, 73, 1)' );

注意 codecept_debug 行，你需要做 /path/to/codecept run --debug为了使它们产生任何效果，您将获得如下额外输出:

* I execute in selenium "lambda function"
  -360px
* I execute in selenium "lambda function"
  rgba(73, 73, 73, 1)
 PASSED 

必须有更好的替代方法来将 Asserts 作为新类加载(将其添加到 acceptance.suite.yml 中的已启用模块对我没有帮助)——但重要的是，您的结果仍然正确:

OK (1 test, 2 assertions)

记录:

请记住，您可以查看 Selenium 日志以验证发生了什么，例如

17:19:02.236 INFO - Executing: [find element: By.xpath: //*[@id="sidebar"]])
17:19:02.243 INFO - Done: [find element: By.xpath: //*[@id="sidebar"]]
17:19:02.246 INFO - Executing: [get value of css property: 0 [[FirefoxDriver: firefox on MAC (64131329-819d-8f4a-8e11-bff91a410f13)] -> id: sidebar], right])
17:19:02.254 INFO - Done: [get value of css property: 0 [[FirefoxDriver: firefox on MAC (64131329-819d-8f4a-8e11-bff91a410f13)] -> id: sidebar], right]
17:19:02.325 INFO - Executing: [find element: By.selector: #sidebar])
17:19:02.334 INFO - Done: [find element: By.selector: #sidebar]
17:19:02.336 INFO - Executing: [get value of css property: 0 [[FirefoxDriver: firefox on MAC (64131329-819d-8f4a-8e11-bff91a410f13)] -> id: sidebar], background-color])
17:19:02.345 INFO - Done: [get value of css property: 0 [[FirefoxDriver: firefox on MAC (64131329-819d-8f4a-8e11-bff91a410f13)] -> id: sidebar], background-color]