We’re excited to announce our new integration with Protractor. Adding automated visual testing to Angular and AngularJS applications is now easier than ever!

Visual testing for Angular apps with Protractor

Protractor, the end-to-end test framework for AngularJS applications built on top of WebDriverJS, automates end-user actions within browsers.

With this integration, you can now insert Percy snapshots into your Protractor scripts wherever you want visual coverage. The goal is to leverage your existing e2e tests to take and compare browser snapshots for visual regression testing.

When snapshots are called from within your e2e tests, Percy will render a full page screenshot–across different browsers and responsive widths:

Check out our Protractor tutorial to get a walkthrough of setting Percy up with Protractor.

Like in the example above, visual changes are highlighted for you to easily review and approve, or take action to fix the visual regression.

It’s easy to get started!

1. Install @percy/protractor with npm or yarn . For example:

npm install --save-dev @percy/protractor

2. Import percySnapshot() into your test file:

const { percySnapshot } = require('@percy/protractor')

3. Call percySnapshot(<SnapshotName>) where you want to add snapshots:

describe('Integration test with visual testing', function() {

it('Loads the app', function() {

browser.get('http://example.com')

percySnapshot('My snapshot')

})

})

4. Finally, wrap your test runner call in the percy exec command. This will start a Percy agent to receive snapshots and upload them to your Percy dashboard. Your new test command becomes:

percy exec —- protractor conf.js

(Note the spaces around the -- ).

That’s it! Now, whenever CI runs, a snapshot of your app in that state will be uploaded to Percy for visual regression testing!

Learn more about integrating Percy and Protractor in our docs, or check out our step-by-step tutorial.