👍

behandeld in dit document

integratie van Percy met Capybara feature tests in elk Ruby web framework inclusief Rails, Sinatra, enz.

indien u geschreven hebt feature tests (of “UI tests”, “acceptatie testen”, enz.), je weet hoe moeilijk het kan zijn om ze goed te krijgen en om uw app in de juiste UI staat. Percy Capybara kunt u alle tijd die u hebt besteed aan het bouwen van uw functie tests en uit te breiden met screenshots en visuele regressie tests om alle visuele veranderingen in uw app te dekken, zelfs achter complexe UI Staten.

De voorbeelden hieronder gaan ervan uit dat u RSpec gebruikt, maar ze kunnen gemakkelijk worden aangepast voor andere testkaders.

🚧

Percy Capybara v4

Deze documentatie is voor Percy Capybara versie 4.0.0 en hoger. Eerdere versies van Percy Capybara hadden een andere, en incompatibele, API.

zie de upgrade naar v4 gids of de oude documenten.

Setup

voeg deze regel toe aan het Gemfile van uw toepassing:

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

en voer vervolgens uit:

$ bundle install

of installeer het zelf met gem install percy-capybara.

u moet ook de Percy agent installeren. Dit is een proces loopt naast uw tests, uploaden snapshots aan Percy namens u. U moet npm gebruiken om het te installeren.

📘

als uw project nog geen package.json bestand in de hoofdmap heeft, voer dan npm init uit en volg de aanwijzingen. package.json is als een Gemfile voor Node pakketten.

om @percy/agent lokaal te installeren voor uw project:

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

Hiermee wordt een ./node_modules/ map aangemaakt die de agent en zijn afhankelijkheden bevat. Het uitvoerbare binaire bestand van de agent bevindt zich in ./node_modules/.bin/percy.

Vervolgens importeren de Percy Capibara bibliotheek in de file(s) die u wilt foto ‘ s te nemen:

require 'percy'

Nu kan Percy.snapshot(...) om een snapshot van de test:

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

De page object passeert u in de Percy.snapshotCapybara::Session object vertegenwoordigt van de webpagina te testen. Het zou beschikbaar moeten zijn in uw Capybara tests.

tenslotte, wikkel uw test runner commando in eenpercy exec Commando. Dit zal een lokale Percy agent starten om snapshots van uw tests te ontvangen en ze te uploaden naar uw Percy dashboard.

voordat u Percy succesvol kunt uitvoeren, moet de omgevingsvariabele PERCY_TOKEN ingesteld zijn:

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

u kunt percy aanroepen met zijn volledige pad (meestal ./node_modules/.bin/percy), of door npx percy (NPX is een node utility waarmee je Pakketbinaire bestanden kunt uitvoeren). Als u een npm-versie voor 5.2 gebruikt die npx niet ondersteunt, kunt u in plaats daarvan $(npm bin)/percy gebruiken.

als u bijvoorbeeld RSpec gebruikt om uw tests uit te voeren, wordt uw nieuwe testopdracht:

$ npx percy exec -- rspec

let op het dubbele streepje, --, tussen npx percy exec en uw test run-opdracht.

u wilt dit npx percy exec -- <test runner> commando toevoegen als de nieuwe manier voor uw CI systeem om uw tests uit te voeren.

dat is het! Nu, wanneer uw CI loopt, snapshots van de app in die staat zal worden geüpload naar Percy voor visuele testen!

configuratie

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

page is het Capybara::Session object dat de webpagina vertegenwoordigt die u wilt snapshoten. Nodig.

options is een optionele hash die kan bevatten:

• name: een string die deze snapshot identificeert. Het kan elke string zijn die voor u zinvol is om de pagina en de status ervan te identificeren. Het moet uniek zijn en hetzelfde blijven voor alle bouwwerken. Als u het niet opgeeft, gebruikt Percy de volledige URL van de te testen pagina. Als u meerdere snapshots maakt met dezelfde URL, moet u handmatig snapshotnamen opgeven om tussen de twee snapshots te kunnen disambigueren. Zie automatisch gegenereerde snapshotnamen voor meer informatie over het genereren van snapshotnamen.
• widths: een array van gehele getallen die de browserbreedtes (in pixels) weergeven waarop u snapshots wilt maken.
• min_height: een geheel getal dat de minimumhoogte van de resulterende snapshot specificeert (de snapshot kan hoger worden dan deze waarde, afhankelijk van de inhoud van de pagina). Standaard 1024px.
• percy_css: een string met Percy specifieke CSS die zal worden toegepast op deze snapshot.
• request_headers: Een object dat HTTP-headers bevat die moeten worden verzonden voor elk verzoek dat wordt gedaan tijdens het zoeken naar activa voor deze snapshot.

voorbeelden

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

globale configuratie

U kunt Percy ook configureren om dezelfde opties te gebruiken voor alle snapshots. Om ondersteunde configuratie te zien, inclusief breedtes, lees dan onze SDK configuratie docs

wachten op elementen met Capybara

Capybara heeft een robuust intern wachtsysteem dat kan worden gebruikt om efficiënt te wachten tot bepaalde pagina-elementen verschijnen voordat u verder gaat. U hoeft nooit een flaky sleep aanroep te schrijven met Capybara.

met RSpec-tests

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

Dit zal efficiënt wachten tot het element #new-project bestaat.

zonder RSpec

kunt u Capybara ‘ s generieke has_no_css?has_no_content?has_no_xpath? methoden gebruiken om ervoor te zorgen dat de paginastatus correct is voordat u verder gaat. U zult waarschijnlijk een uitzondering willen maken om de uitvoering te stoppen als de query voor het element true retourneert.

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

More info

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

probleemoplossing

ontbrekende stijlen

If uw screenshots ontbreken stijlen en u gebruikt webpacker om uw apps front-end assets te bouwen, moet u deze configureren om de CSS te extraheren bij het bouwen voor tests. Standaard zal Webpack CSS genereren als een blob actief, dat niet ontdekt of opgeslagen kan worden wanneer we actief zoeken. In uw webpacker configuratiebestand moet u extract_css: true:

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