Регрессионное тестирование для стилизации и компоновки веб-приложений

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

Ответ 1

На самом деле, один из скрытых камней Selenium - это то, что вы можете использовать его для захвата экрана браузером. Затем, используя описанную здесь технику (http://www.bryancook.net/2009/10/find-differences-between-images-c.html), вы можете выделить различия между предыдущими моментальными снимками.

В этом примере показано, как получить скриншот домашней страницы, а затем создать разное изображение. С небольшим дополнительным мастерингом вы можете использовать ту же технику для подсчета пикселей, которые отличаются друг от друга.

[Test]
public void CompareHomePageToPrevious()
{
    string fileName = Path.Combine(Environment.CurrentDirectory,"homepage.bmp");
    var selenium = new DefaultSelenium("localhost",4444, "*chrome", "http://mywebsite");
    selenium.Start();
    selenium.Open("/");
    selenium.CaptureEntirePageScreenshot(fileName, "");

    // load current and previous captures
    var current  = new Bitmap(filename);
    var previous = new Bitmap(_previousHomepageImage);

    // find all pixels that are the same and make them pink
    Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink);
    diff.MakeTransparent(Color.Pink);

    // save the image for viewing
    // or count the number of different
}

Selenium - действительно интересный выбор, потому что он кросс-платформенный и кросс-браузер, что означает, что вы можете захватывать экраны разных браузеров. Вы можете использовать эту технику для сравнения моментальных снимков между сборками или для сравнения между браузерами.

Ответ 2

Я думаю, вы могли бы создать "идеальный" снимок каждой страницы вашего веб-приложения для использования в качестве ссылки.

Затем создайте новый снимок каждой страницы после обновления css и сравните с предыдущими. Сравнение 1:1 должно быть в порядке, если вы убедитесь, что всегда сохраняете одно и то же разрешение и т.д.

Вы даже можете сделать это так, чтобы вы могли сказать, что если страница отличается от другой страницы, на самом деле "лучше", чем в примере, и использовать "другой" в качестве примера для следующих прогонов.

Таким образом, когда вы что-то исправляете, вы можете увидеть разницу для одной страницы и пометить ее как лучшую, а затем исправить ошибку на другой странице, убедившись, что вы не возвращаете ошибку, которую пытались исправить в на первом месте.

Ответ 3

Существует способ протестировать макет веб-приложения с помощью Galen Framework. Этот инструмент имеет свой собственный язык и очень легко учиться и понимать. Это Selenium based, и вы можете запустить тест в Selenium Grid, Sauce Labs, если вы хотите протестировать свое приложение в разных браузерах.

Этот инструмент получает местоположение указанного элемента на странице и проверяет их относительно друг друга.

Пример: если вы хотите проверить, что панель меню находится под заголовком и растягивается до ширины браузера и имеет высоту 50 пикселей, вы можете сделать это следующим образом:

menu
    below: header 5px
    width: 100% of screen/width
    height: 50px

Этот инструмент также может использоваться для тестирования адаптивных конструкций.

Вы можете найти полную документацию на официальном сайте http://galenframework.com

Лучшая часть - вы даже можете создать JAVA Tests. API-интерфейс Galen JavaScript также доступен вместе с примерами проектов в github.

Опять же, тесты (тесты), написанные один раз, могут быть использованы на нескольких этапах жизненного цикла приложения.

Ответ 4

Вы должны проверить Тестирование веб-согласованности в качестве подхода к проведению регрессионного тестирования. Мы используем эти методы для управления Mogotest, который является размещенной службой для автоматической визуальной регрессии и кросс-браузерных тестов. За годы, прошедшие после публикации этого ответа, я отключил услугу Mogotest. Упоминание здесь остается историческим артефактом, указывающим на то, что методы использовались в производственной системе, а не только в учебном корме.

Ответ 5

Если вы работаете в рубине, посмотрите на rspec-page-regression gem. Это плагин RSpec, который позволяет сравнивать запрошенные снимки страниц с ожидаемым изображением. Он работает с Poltergeist, который является Capybara, который использует PhantomJS и поддерживает рендеринг моментальных снимков страниц.

Rspec-page-regression предоставляет RSPec-метку, которая позволяет вам делать такие вещи, как

context "user page" do
  before(:each) do
    visit user_path
  end

  it { page.should match_expected }

  context "popup help" do
    before(:each) do
      click_button "Help"
    end

    it { page.should match_expected }
  end
end

И он обеспечивает механизм для управления изображениями ожидания.

Отказ от ответственности: я автор драгоценного камня.