Covered in this doc
Cloning an example application with Percy already integrated
Making some changes and seeing the snapshots and visual diffs in Percy
Step 1: Clone the example app:
$ git clone https://github.com/percy/example-ember.git $ cd example-ember
Step 2: Sign in to Percy, create a new organization, and create a new project. You can name both the organization and project 'todo'.
After you've created the project, you'll be shown a token environment variable.
Step 3: In the shell window you're working in, export the token environment variable:
# Windows $ set PERCY_TOKEN=<your token here> # Unix $ export PERCY_TOKEN=<your token here>
Note: Usually this would only be set up in your CI environment, but to keep things simple we'll configure it in your shell so that Percy is enabled in your local environment.
Step 4: Install the example app's dependencies:
$ npm install
Step 5: Run the tests:
$ npm test:percy
This will run the test suite and send snapshots to Percy. You can view the snapshots in Percy now if you want, but there will be no visual comparisons yet.
Step 6: Use your text editor to edit
app/styles/app.css and change the
#new-todo background-color from
Step 7: Also edit
app/templates/application.hbs and edit the footer to add a new paragraph on line 29:
<p>Now tested with Percy</p>
Step 8: Commit the change:
$ git add . && git commit -m "Changed background color and updated footer."
Step 9: Run the tests again:
$ npm test:percy
This will take snapshots of our modified application, render new screenshots to compare against previously rendered screenshots, and detect visual changes between the two.
At the end of the run output, you will see logs from Percy confirming that the screenshots were successfully rendered and giving you a direct URL to check out the visual changes.
Step 10: Visit your project in Percy and you'll see a new build with the visual comparisons between the two runs. Click anywhere on the Build 2 row. Individual screenshots are grouped into snapshots for each page. By default, Percy renders screenshots at 375px and 1280, and across both Firefox and Chrome. You can see the baseline snapshots on the left, and the new snapshots on the right.
Percy has highlighted what's changed visually in the app! Snapshots with the largest changes are shown first You can click on the right panel to reveal the underlying screenshot.
If you scroll down, you'll see that no other snapshots were affected by our changes to the 'Clear completed' button. The unchanged snapshots appear grouped together at the bottom of the list.
From here, you can try making your own changes to the app if you like. If you do re-run the tests, and then you'll see your changes reflected in Percy.
Updated 9 months ago