Verify CSS Value in Codeception Webdriver

Question

I want to verify the amount of pixels an element has been moved via an absolute position, from the CSS style sheet, while using selenium Webdriver in a Codeception Acceptance test. In my example, the interface shows an element is "On" when a background image is absolutely positioned 50px to the right.

While Codeception does not have this as a default command, you can use ExecuteInSelenium or a Helper, which I believe will allow this operation.

The example provided for Codeception of ExecuteInSelenium is:

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

The example of the CSS value I am looking to verify, on the element, is the "right" value.

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

The HTML element is listed as:

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

Due to a repeating class name, on other elements, I need to use an Xpath and believe the following will get me the value for the number of pixels but am unsure how to verify the value is 50px to allow this step of the test to pass.

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

I am having difficulty finding examples online and any help is appreciated.

Answer 1

Yes you can, try something like this:

$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)' );

Note the codecept_debug lines, you need to do /path/to/codecept run --debug for them to have any effect, you'll get extra output like this:

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

There must be an better alternative to loading Asserts as a new class (adding it to the enabled modules in acceptance.suite.yml didn't help me) – but importantly your results are still correct:

OK (1 test, 2 assertions)

Logging:

Remember you can look at the Selenium logs to verify what's happening, e.g.

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]