Подсушить тесты

TL;DR

Введение

Итак, руби-рельсы, браузерное тестирование, селениум, капибара и призма.

Про селениум и капибару не буду говорить, думаю, кто занимается тестированием, про это всё знают и без меня, а вот про призму хочу сказать пару слов.

SitePrism - это DSL (Domain Specific Language), который дает описание веб-страницы, удобное для проведения тестирования. SitePrism позволяет тестировщику структурно описать страницу, выделив части, подлежащие тестированию, и опустив несущественное.

Пример. Корзина магазина:

Описание для корзины, изображенной выше:

class Cart < SitePrism::Page
  set_url '/cart.html'

  element :header, 'h1'                                # Заголовок: "Shopping cart"
                                                  
  sections :cart_items, 'div.cart_items' do            # Массив из товаров (sections - во множественном числе)
    element :name, 'div.item-name'                     # Имя одного товара
    element :image, 'img.item-image'                   # Картинка товара
    element :price, 'div.item-price'                   # Цена за единицу
    element :quantity, 'div.item-quantity'             # Кол-во
    element :total, 'div.item-total'                   # Стоимость выбранных товаров
  end

  section :checkout, 'div.checkout' do                 # Раздел внизу с кнопкой  (section - в единственном числе)
    element :total, 'div.checkout-total'               # Общая соимость заказа
    element :checkout_button, 'button.checkout-button' # Кнопка
  end
end

Даже человек без подготовки, поглядев на картинку и описание, легко поймёт, что чему соответствует.

Имея подобное описание, можно написать тест вроде такого:

describe 'Cart' do
  it 'is correct' do
    page = Cart.new
    page.load

    # Проверили заголовок
    expect(page.header.text).to eq('Shopping Cart')

    # Убедились, что товара 2
    expect(page.cart_items.size).to eq(2)

    # Проверили первый товар
    expect(page.cart_items[0].name.text).to match('Cup')
    expect(page.cart_items[0].quantity.value).to match('1')
    expect(page.cart_items[0].image[:src]).to match('cup.png')
    expect(page.cart_items[0].price.text).to match('19.00')
    expect(page.cart_items[0].total.text).to match('19.00')

    # Проверили второй товар
    expect(page.cart_items[1].name.text).to match('Cap')
    expect(page.cart_items[1].quantity.value).to match('2')
    expect(page.cart_items[1].image[:src]).to match('cap.png')
    expect(page.cart_items[1].price.text).to match('24.00')
    expect(page.cart_items[1].total.text).to match('48.00')

    # Проверили подвал корзины
    expect(page.checkout.total.text).to match('67.99')
    expect(page.checkout.checkout_button.text).to match('Checkout')
  end
end

Скорее всего, это типичная картина проверки страницы в тесте. Очевидно, тест содержит избыточные, дублирующиеся слова, замедляющие как написание, так и чтение. Да, можно сократить, введя переменные, примерно так:

item = page.cart_items[0]
expect(item.name.text).to match('Cup')
expect(item.quantity.value).to match('1')
expect(item.image[:src]).to match('cup.png')
expect(item.price.text).to match('19.00')
expect(item.total.text).to match('19.00')

Но всё равно жирно и многословно.

gem prism_checker

Я решил, что можно же просто взять призму и сказать, чего мы от нее ждём, а ждём мы соответствие такой вот структуре:

{
  header: 'Shopping Cart',
  cart_items: [
    {
      name: 'Cup',
      image: 'cup.png',
      price: '19.00',
    },
    {
      name: 'Cap',
      image: 'cap.png',
      price: '24.00',
    }
  ],
  checkout: {
    total: '67.00',
    checkout_button: 'Checkout'
  }
}

Вся необходимая информация есть, минимальное количество слов, в тесте такая приятная легкость образовалась. Никакого жира, один рельеф, осушили по-максимуму.

Эту идею я реализовал в gem-е PrismChecker, который позволяет коротко описывать, что мы ожидаем от призмы. Вот так:

# RSpec-версия
expect(page).to be_like(
  header: 'Shopping Cart',
  cart_items: [
    {
      name: 'Cup',
      image: 'cup.png',
      price: '19.00',
    },
    {
      name: 'Cap',
      image: 'cap.png',
      price: '24.00',
    }
  ],
  checkout: {
    total: '67.00',
    checkout_button: 'Checkout'
  }
)

# MiniTest-версия
assert_page_like(page,
  header: 'Shopping Cart',
  cart_items: [
    # ...
  ],
  checkout: {
    # ...
  }
)

Иными словами, PrismChecker проверяет призму на соответствие некоторому хэшу.

Грубо говоря, element-у ставится в соответствие строка, section-у - хэш, а elements и sections проверяются с помощью массива.

# element
assert_page_like(page, header: 'Shopping Cart')
assert_page_like(page.header, 'Shopping Cart')

# section
assert_page_like(page, checkout: {
  total: '67.00',
  checkout_button: 'Checkout'
})
assert_page_like(page.checkout, 
  total: '67.00',
  checkout_button: 'Checkout'
)

# elements, sections
assert_page_like(page, cart_items: [
  {
    name: 'Cup',
    price: '19.00',
  },
  {
    name: 'Cap',
    price: '24.00',
  }
])

В случае ошибок будет выдано сообщение такого вида:

Подробности

Установка

для RSpec:

# Gemfile 
gem 'prism_checker_rspec'

# spec_helper.rb
require 'prism_checker_rspec'

для MiniTest:

# Gemfile
gem 'prism_checker_minitest'

# test_helper.rb
require 'prism_checker_minitest'

Примеры

Проверка секции и двух дочерних элементов:

assert_page_like(page, checkout: {
  total: '67.00',
  checkout_button: 'Checkout'
})

Если первый аргумент является классом SitePrism::Page, то при тестировании вначале будет выполнена проверка, что страница загружена. Элементы и секции сначала проверяются на видимость, потом на соответствие:

assert_page_like(page, button: 'Button')
# assert(page.loaded?)
# assert(page.button.visible?)
# assert_match(page.button.text, 'Button')

Если элемент является изображением, то проверяемая строка будет сравниваться с атрибутом src. Для input и textarea проверяется value. Checkbox или radio можно проверить следующим образом:

assert_page_like(page, checkbox: true)
assert_page_like(page, checkbox: {checked: true})

element можно сравнивать не только со строкой, но и с хэшем:

assert_page_like(page.image,
                 src: 'logo.png',
                 class: 'logo',
                 alt: 'Logo')

Проверить, что элемент/секция видимы/невидимы или отсутствуют:

assert_page_like(page, 
                 header: :visible, 
                 checkout: :invisible
)

assert_page_like(page, checkout: :absent)

Элементы и секции вначале проверяются на то, что содержат правильное количество записей:

assert_page_like(page,
                 items: [
                   'Item 1',
                   'Item 2'
                 ])
# assert(page.loaded?)
# assert_equal(page.items.size, ["Item 1", "Item 2"].size)
# ...

Элементы и секции можно проверять просто на размер:

assert_page_like(page, items: 2)
# assert(page.loaded?)
# assert_equal(page.items.size, 2)

Со строкой можно сравнивать не только element, но и page, section, sections, elements:

assert_page_like(page, 'Shopping Cart')
# assert(page.loaded?)
# assert_match(page.text, 'Shopping Cart')

Вместо строки можно использовать регулярные выражения:

assert_page_like(page, /Shopping Cart/)

Если нужно проверить, что текст элемента есть пустая строка, то может возникнуть проблема. По умолчанию проверяется вхождение подстроки, а пустая строка входит в любую строку:

assert_page_like(page, header: '')  # Всегда сработает, даже если header не пуст

Эту проблему можно решить с regexp или специальной проверкой:

assert_page_like(page, header: /^$/) 
assert_page_like(page, header: :empty)

По умолчанию строки сравниваются путем поиска подстроки, но можно настроить гем на точное соответствие:

assert_page_like(page, header: 'Cart')
# будет проверено вот так:
header.include?('Cart')

PrismChecker.string_comparison = :exact # Точное соответствие
assert_page_like(page, header: 'Cart')
# будет проверено вот так:
header == 'Cart'

Еще примеры можно найти на странице проекта, на гитхабе.

Итого

Gem PrismChecker упрощает написание и чтение браузерных тестов и бережет нервы тестировщиков.

Буду рад услышать отзывы, кртику, баги.