seleniumwebdrivercodeception

Verify CSS Value in Codeception Webdriver

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.

Solution

  • Why dont you try this 'VisualCeption'.Its an addon to Codeception.I believe it can solve your problem.

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