Geek Answers Handbook

CSS value validation in Codeception Webdriver

I want to check the number of pixels that an element moved through an absolute position from a CSS stylesheet when using selenium Webdriver in the Accept Acceptation test. In my example, the interface shows that the element is "On" when the background image is absolutely positioned at 50 pixels to the right.

While Codeception does not have this as the default command, you can use ExecuteInSelenium or an assistant that I believe will allow this operation.

The example given for Codeception ExecuteInSelenium is as follows:

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

An example of a CSS value that I want to test on an element is the "correct" value.

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

The HTML element is listed as:

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

- , , Xpath , , , 50 , .

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

, .

+4
2

, - :

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

Logging:

, 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]
+1

More articles:


All Articles