Проверьте значение CSS в Codeception Webdriver

Я хочу проверить количество пикселей, на которое элемент был перемещен через абсолютную позицию, из таблицы стилей CSS, при использовании selenium Webdriver в тесте приема кода. В моем примере интерфейс показывает, что элемент «Включен», когда фоновое изображение абсолютно расположено на 50 пикселей вправо.

Хотя Codeception не имеет этой команды по умолчанию, вы можете использовать ExecuteInSelenium или Helper, который, как я полагаю, разрешит эту операцию.

Пример, представленный для Codeception ExecuteInSelenium:

$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");
});

Мне трудно найти примеры в Интернете, и любая помощь приветствуется.


person Uberfloyd    schedule 02.09.2014    source источник


Ответы (3)


Почему бы вам не попробовать этот «VisualCeption». Это дополнение к Codeception. Я считаю, что оно может решить вашу проблему.

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

person mfsi_krushnas    schedule 03.09.2014
comment
Похоже, что VisualCeption удовлетворит мои потребности. Было бы предпочтительнее прочитать значение CSS, поскольку смещение пикселей будет постоянным в разных средах, но, похоже, это может быть невозможно. Спасибо! - person Uberfloyd; 04.09.2014

Да, вы можете, попробуйте что-то вроде этого:

$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]
person William Turrell    schedule 20.02.2015
comment
Это действительно полезно. Большое спасибо за пример кода. - person Krupa Nanda; 06.03.2020

person    schedule
comment
Пожалуйста, добавьте объяснение к своему ответу, отредактировав его, чтобы другие могли извлечь из него уроки. - person Nico Haase; 02.03.2020