Разные CSS результаты между geckodriver и ChromeDriver - PullRequest
0 голосов
/ 14 июля 2020

У меня возникла проблема при проверке свойств CSS в моих тестах Capybara, каждый веб-драйвер возвращает значение селектора в другом формате.

В моем проекте страница содержит элемент, имеющий CSS свойство background-color в виде шестнадцатеричного значения. Пример CSS выглядит следующим образом:

#selected-colour-red {
    background-color: #ff0000;

При запуске тестов веб-драйверы (по какой-то причине я все еще не понимает) вместо этого ищут RGB эквивалент этого шестнадцатеричного значения. Итак, мои тесты Capybara анализируют входное значение и преобразуют его в соответствующее значение RGB, чтобы сопоставитель RSpe c мог сравнить его с тем, что видит webdriver:

And(/^I should see the colour "(.*?)"$/) do |colour|
  case colour
    when 'red'
      rgb_colour = 'rgb(255, 0, 0)'
    when 'green'
      rgb_colour = 'rgb(0, 255, 0)'
    when 'blue'
      rgb_colour = 'rgb(0, 0, 255)'
  selected_colour = page.find(:css, 'div#colours-grid div#selected-colour-' + colour)
  pp selected_colour.style('background-color')   # debug - see what property the webdriver returns
  expect(selected_colour.style('background-color')).to have_content(rgb_colour)
end

Линейные выходы pp что видит веб-драйвер при запуске теста.

Когда я запускаю тесты с помощью geckodriver, результаты проходят, потому что значение, которое видит веб-драйвер, совпадает со значением в тесте:

    And I should see the text "The selected colour is <colour>" # features/colours.feature:14

    Examples: 
      | colour |
{"background-color"=>"rgb(255, 0, 0)"}
      | red    |
{"background-color"=>"rgb(0, 255, 0)"}
      | green  |
{"background-color"=>"rgb(0, 0, 255)"}
      | blue   |
3 scenarios (3 passed)
15 steps (15 passed)
0m3.205s

Однако, Тесты chromerdriver терпят неудачу, потому что возвращаемое свойство CSS имеет другой формат rgba:

 And I should see the text "The selected colour is <colour>" # features/colours.feature:14

    Examples: 
      | colour |
{"background-color"=>"rgba(255, 0, 0, 1)"}
      | red    |
      expected to find text "rgb(255, 0, 0)" in "{\"background-color\"=>\"rgba(255, 0, 0, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:17:13:in `I should see the colour "red"'
{"background-color"=>"rgba(0, 255, 0, 1)"}
      | green  |
      expected to find text "rgb(0, 255, 0)" in "{\"background-color\"=>\"rgba(0, 255, 0, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:18:13:in `I should see the colour "green"'
{"background-color"=>"rgba(0, 0, 255, 1)"}
      | blue   |
      expected to find text "rgb(0, 0, 255)" in "{\"background-color\"=>\"rgba(0, 0, 255, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:19:13:in `I should see the colour "blue"'
3 scenarios (3 failed)
15 steps (3 failed, 3 skipped, 9 passed)
0m2.051s

Я не хочу писать код c для конкретного драйвера, так как его сложно поддерживать.

  • Должен ли я написать ожидание использования регулярного выражения в качестве сопоставителя?
  • Есть ли способ изменить формат, который хром или firefox использует для представления значений RGB?
  • Можно ли написать тест так, чтобы он явно соответствовал шестнадцатеричному значению в CSS?
  • Почему драйверы представляют это значение по-другому?

1 Ответ

2 голосов
/ 14 июля 2020

Вы должны спросить авторов chromedriver и geckodriver, почему их возвращаемые значения различаются, но это, вероятно, потому, что spe c слабый - https://www.w3.org/TR/webdriver/#get -element- css -value - и они просто решили вернуть два разных, но действительных значения.

Нет, невозможно напрямую сопоставить шестнадцатеричное значение в CSS, потому что это недоступно для Capybara. Лучшее решение - использовать регулярное выражение, и вы должны использовать сопоставление match_style, а не вызывать style напрямую

expect(selected_colour).to match_style('background-color' => /rgba?\(255, 0, 0(, 1)?\)/)

Другой вариант - использовать фильтр style для have_css сопоставитель и сразу все делать

expect(page).to have_css('div#colours-grid div#selected-colour-' + colour, style: { 'background-color' => /rgba?\(255, 0, 0(, 1)?\)/ } )
...