在 Codeception Webdriver 中验证 CSS 值答案

【问题标题】：Verify CSS Value in Codeception Webdriver在 Codeception Webdriver 中验证 CSS 值
【发布时间】：2026-01-30 07:45:01
【问题描述】：

我想在 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");
});

我很难在网上找到示例，感谢您提供任何帮助。

【问题讨论】：

标签： selenium webdriver codeception

【解决方案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]

【讨论】：

这真的很有帮助。非常感谢您提供示例代码。

【解决方案2】：

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

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

【讨论】：

VisualCeption 听起来可以满足我的需求。最好读取 CSS 值，因为像素偏移在多个环境中是恒定的，但看起来这可能是不可能的。谢谢！

【解决方案3】：

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

【讨论】：

请在您的答案中添加一些解释，以便其他人学习