Регрессионное тестирование стилей и макетов веб-приложений - PullRequest
Новая
       25

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

11 голосов
/ 28 февраля 2011

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

Ответы [ 5 ]

2 голосов
/ 01 марта 2011

На самом деле, одна из скрытых жемчужин 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 - действительно интересный выбор, потому что он кросс-платформенный и кросс-браузерный, что означает, что вы можете захватывать экраны разных браузеров. Вы можете использовать эту технику для сравнения снимков между сборками или для сравнения между браузерами.

1 голос
/ 21 января 2015

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

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

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

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

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

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

Самое приятное то, что вы даже можете создавать JAVA-тесты. JavaScript API Galen также доступен вместе с примерами проектов в github.

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

1 голос
/ 28 февраля 2011

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

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

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

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

0 голосов
/ 18 марта 2013

Если вы разрабатываете в ruby, взгляните на гем rspec-page-regression . Это плагин 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

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

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

0 голосов
/ 23 января 2013

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

...