Skip to main content
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Run a sample App Percy build with Appium and JavaScript

Get hands-on experience on running App Percy with Appium and JavaScript using our sample repository

Prerequisites

Before you start, ensure that you have the following installed:

With App Percy, you can automate the visual testing of app applications, ensuring visual consistency across different releases and preventing visual regressions. This page demonstrates how to use App Percy to run visual tests on a sample app application.

Run your App Percy build

Follow these steps to clone the sample App Percy application, run a build, and view the results of the visual comparison:

Clone the sample application

Clone the sample application and install the required packages:

Copy icon Copy

Upload the sample application

Upload the sample application to BrowserStack App Automate:

This tutorial specifically uses BrowserStack App Automate to run Appium tests, though you can also follow it with any other service or when running locally. For App Percy to work, you only need a driver or browser object that you pass to the percyScreenshot command.

If you choose to use BrowserStack App Automate, follow these steps:

  • You need a BrowserStack username and access key.
  • To obtain your access credentials, sign up for a free trial or purchase a plan.
  • Get your username and access key from your profile page.
Copy icon Copy
Copy icon Copy

After the command runs successfully, you get a response similar to the following:

Copy icon Copy

Make a note of the app url.

To know more about uploading an app to App Automate, refer to the Upload an App REST API documentation.

Create an App Percy project

Sign in to Percy and create a new app project, for example, test-project. After you’ve created the project, you’ll be shown a Percy Access Token. Use it in the next step.

Create an App Percy project

Set Percy token as an environment variable

Export the token environment variable:

Copy icon Copy

Usually this would only be set up in your CI environment, but to keep things simple we’ll configure it in your local shell so that Percy is enabled in your local environment.

If you use App Automate, export the following to allow the script to create the driver for the APP URL generated in step 1. Export for Android or iOS depending on the platform you want to run.

Copy icon Copy
Copy icon Copy

Generate the first build

Check out a new branch for your work in this tutorial (we’ll call this branch tutorial-example), then run tests & take screenshots:

git checkout -b tutorial-example
cd wd
npm install
git checkout -b tutorial-example
cd webdriverio
npm install

Now run the build with following commands

npx percy app:exec -- node android.js
npx percy app:exec -- node ios.js
npx percy app:exec -- npm run android
npx percy app:exec -- npm run ios

This runs the app’s JavaScript Appium tests, which contain calls to create Percy screenshots. The screenshots are then uploaded to Percy for comparison. Percy uses the PERCY_TOKEN you used in Step 2 to know which organization and project to upload the screenshots to.

You can view the screenshots in Percy now if you want, but there will be no visual comparisons yet. You’ll see that Percy shows you that these screenshots come from your tutorial-example branch.

Modify the sample application

Now, it’s time to introduce some visual changes to your app.

// For Android, the file is `./android.js`.
// Say change this to "App Percy"
return searchInput.sendKeys("BrowserStack"); 
// For iOS, the file is `./ios.js`.
// Say change this to "email@browserstack.com"
return textInput.sendKeys("hello@browserstack.com"+"\n"); 
// For Android, the file is `./android/specs/test.js`.
// Say change this to "App Percy"
await insertTextSelector.addValue("BrowserStack"); 
// For iOS, the file is `./ios/specs/test.js`.
// Say change this to "email@browserstack.com"
await textInput.addValue("hello@browserstack.com"+"\n"); 

Commit your changes

Create a commit with the changes.

Copy icon Copy

Run tests again

Run the tests with screenshots again.

npx percy app:exec -- node android.js
npx percy app:exec -- node ios.js
npx percy app:exec -- npm run android
npx percy app:exec -- npm run ios

View visual differences on dashboard

Visit your project in Percy and you’ll see a new build with visual comparisons between the two runs. Click anywhere on the Build 2 row (we are assuming here that you are using a new project to test things out). You can see the original screenshots on the left, and the new screenshots on the right.

Percy has highlighted what’s changed visually in the app! Screenshots with the largest changes are shown first You can click on the highlight to reveal the underlying screenshot.

View visual differences

If you scroll down, you’ll see that no other test cases were impacted by our changes to text. The unchanged screenshots are shown under an Unchanged filter and are hidden by default.

Congratulations!

From here, you can try making your own changes to the app and tests, if you like. If you do, re-run the tests and you’ll see any visual changes reflected in Percy.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle