Question

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

虽然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]

Answer 2

为什么不尝试这个'VisualCeption'。它是Codeception的插件。我相信它可以解决你的问题。

https://github.com/DigitalProducts/codeception-module-visualception

Answer 3

$I->executeInSelenium(function(\Facebook\WebDriver\Remote\RemoteWebDriver $webdriver) {
    return $webdriver->findElement(WebDriverBy::cssSelector('#t3-login-submit'))->getCSSValue('background-color');
})

验证Codeception Webdriver中的CSS值

3 个答案: