👍

zawarta w tym dokumencie

Integracja Percy ’ ego z testami funkcji Capybara w dowolnym frameworku Ruby, w tym Rails, Sinatra itp.

jeśli napisałeś testy funkcjonalności (lub „testy UI”, „testy akceptacyjne” itp.), wiesz, jak trudne może być ich prawidłowe i uzyskanie aplikacji w odpowiednim stanie interfejsu użytkownika. Percy Capybara pozwala poświęcić cały czas na tworzenie testów funkcji i rozszerzyć je o zrzuty ekranu i wizualne testy regresji, aby objąć wszystkie zmiany wizualne w aplikacji, nawet za złożonymi Stanami interfejsu użytkownika.

poniższe przykłady zakładają, że używasz RSpec, ale można je łatwo dostosować do innych frameworków testowych.

🚧

Percy Capybara v4

ta dokumentacja jest dla Percy Capybara w wersji 4.0.0 i nowszej. Wcześniejsze wersje Percy Capybara miały inne i Niekompatybilne API.

zobacz Przewodnik aktualizacji do v4 lub stare dokumenty.

Konfiguracja

Dodaj tę linię do pliku Gemfile swojej aplikacji:

gem 'percy-capybara', '~> 4.0.0'

, a następnie uruchom:

$ bundle install

lub zainstaluj ją samodzielnie za pomocą gem install percy-capybara.

trzeba też zainstalować agenta Percy ’ ego. Jest to proces przebiegający równolegle z Twoimi testami, przesyłający migawki do Percy ’ ego w Twoim imieniu. Będziesz musiał użyć npm, aby go zainstalować.

📘

Jeśli twój projekt nie ma jeszcze plikupackage.json w katalogu głównym, uruchomnpm init I postępuj zgodnie z instrukcjami. package.json jest jak Gemfile dla pakietów węzłów.

aby zainstalować@percy/agent lokalnie dla Twojego projektu:

$ npm install --save-dev @percy/agent

utworzy to./node_modules/ katalog zawierający agenta i jego zależności. Plik wykonywalny agenta znajduje się w ./node_modules/.bin/percy.

następnie zaimportuj bibliotekę Percy Capybara do plików, z których chcesz zrobić migawki:

require 'percy'

teraz możesz użyćPercy.snapshot(...), aby wygenerować migawkę z testu:

describe 'Test with visual testing', type: :feature, js: true do it 'loads example.com homepage' do visit 'https://example.com' Percy.snapshot(page, { name: 'example.com homepage' }) endend

page obiekt, który PRZEKAZUJESZ doPercy.snapshot jest obiektemCapybara::Session, który reprezentuje testowaną stronę internetową. Powinien być dostępny w testach kapibary.

na koniec zawiń polecenie test runner w poleceniepercy exec. Spowoduje to uruchomienie przez lokalnego agenta Percy 'ego migawek z Twoich testów i przesłanie ich do Pulpitu Nawigacyjnego Percy’ ego.

aby pomyślnie uruchomić Percy, należy ustawić PERCY_TOKEN zmienną środowiskową:

# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>

można wywołać percy używając jego pełnej ścieżki (zazwyczaj ./node_modules/.bin/percy) lub wywołując (NPX to narzędzie węzła, które pozwala na wykonywanie plików binarnych pakietów). Jeśli używasz wersji npm sprzed 5.2, która nie obsługuje npx, możesz użyć $(npm bin)/percy zamiast tego.

na przykład, jeśli używasz RSpec do uruchamiania testów, twoje nowe polecenie test staje się:

$ npx percy exec -- rspec

zwróć uwagę na podwójny myślnik,--, pomiędzynpx percy exec I poleceniem test run.

powinieneś dodać to polecenienpx percy exec -- <test runner> jako nowy sposób uruchamiania testów przez Twój system CI.

To jest to! Teraz, gdy twój CI działa, migawki aplikacji w tym stanie zostaną przesłane do Percy ’ ego do testów wizualnych!

Konfiguracja

Percy.snapshot(page)Percy.snapshot(page, options)

page jest obiektem Capybara::Session reprezentującym stronę internetową, którą chcesz wykonać. Wymagane.

options jest opcjonalnym skrótem, który może zawierać:

• name: ciąg znaków identyfikujący tę migawkę. Może to być dowolny ciąg znaków, który ma sens, aby zidentyfikować stronę i jej stan. Musi być unikalny i pozostać taki sam we wszystkich konstrukcjach. Jeśli go nie podasz, Percy użyje pełnego adresu URL testowanej strony. Jeśli robisz wiele migawek z tym samym adresem URL, musisz ręcznie podać nazwy migawek w celu rozróżnienia między tymi dwoma migawkami. Aby uzyskać więcej informacji na temat generowania nazw migawek, zobacz automatycznie generowane nazwy migawek.
• widths: tablica liczb całkowitych reprezentująca szerokość przeglądarki (w pikselach), przy której chcesz robić migawki.
• min_height: liczba całkowita określająca minimalną wysokość wynikowej migawki (migawka może okazać się wyższa niż ta wartość, w zależności od zawartości strony). Domyślnie 1024px.
• percy_css: ciąg zawierający specyficzny CSS, który zostanie zastosowany do tego zrzutu.
• request_headers: obiekt zawierający nagłówki HTTP, które mają być wysłane dla każdego żądania złożonego podczas wykrywania zasobów dla tej migawki.

przykłady

Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })

Konfiguracja globalna

Możesz również skonfigurować Percy ’ ego tak, aby używał tych samych opcji we wszystkich migawkach. Aby zobaczyć obsługiwaną konfigurację, w tym szerokości, przeczytaj nasze dokumenty konfiguracji SDK

oczekiwanie na elementy z Capybara

Capybara ma solidny wewnętrzny system oczekiwania, który może być użyty do efektywnego oczekiwania na pojawienie się niektórych elementów strony przed kontynuowaniem. Nigdy nie powinieneś pisać flakysleep połączenia z Capybara.

przy testach RSpec

expect(page).to have_css('#new-project')expect(page).to have_content('New Project')

będzie to efektywnie czekać na istnienie elementu#new-project.

bez RSpec

Możesz użyć ogólnych metod Capybaryhas_no_css?has_no_content?has_no_xpath?, aby upewnić się, że stan strony jest poprawny przed kontynuowaniem. Prawdopodobnie będziesz chciał wywołać wyjątek, aby zatrzymać wykonywanie, jeśli zapytanie dla elementu zwróci true.

raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')

więcej informacji

• https://github.com/teamcapybara/capybara#querying
• https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends

Rozwiązywanie problemów

brakujące style

Jeśli na zrzutach ekranu brakuje stylów i używasz webpackera do tworzenia zasobów frontowych aplikacji, musisz go skonfigurować, aby wyodrębnić CSS podczas budowania do testów. Domyślnie Webpack wygeneruje CSS jako blob zasób, którego nie można wykryć ani zapisać podczas wykrywania zasobów. W pliku konfiguracyjnym webpackera musisz podać extract_css: true:

test: ... # Extract and emit a css file extract_css: true