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

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 упрощает написание и чтение браузерных тестов и бережет нервы тестировщиков.

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