Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,4 @@ replay_pid*
.idea
target/
out/
node_modules/
26 changes: 8 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ $ git clone git@github.com:percy/example-percy-playwright-java
$ cd example-percy-playwright-java
$ mvn compile
$ npm install
$ npx playwright install
```

This tutorial specifically uses Browserstack Automate to run playwright test.
Expand Down Expand Up @@ -84,39 +85,28 @@ $ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

Alternatively you can also update `USER_NAME`, `ACCESS_KEY` with Browserstack User name, Access key in the script as well.

### Step 4
### Step 4: Generate first Percy build (baseline)

Considering all the above steps are done, we will run our tests, which will create web/automate session as well as percy build.
Run the tests to create your first Percy build. This serves as the baseline for visual comparisons.

#### For Percy Web
**Note:** In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
**Note:** For web tests, a local browser is used. You don't need the Automate setup for this.

``` shell
$ npx percy exec --verbose -- mvn test -P web-percy-test
```

Your **First Percy Web** build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.

#### For Percy on Automate

``` shell
$ npx percy exec --verbose -- mvn test -P automate-percy-test
```

Your **First Percy on Automate** build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.

### Step 5
Since this is the first build, all snapshots will be new and there will be no comparisons yet.

Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to following file in `PercyTest.java`

```java
page.click("//*[@id=\"1\"]/div[4]"); // Say change id to 3
```
### Step 5: Generate second Percy build (with visual changes)

Or else just run `PercyAfterTest.java`, we have already made visual changes in this script. If you run the `PercyAfterTest.java` script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
Run the "after" tests which contain pre-made visual changes (selects a Samsung product instead of Apple). This build will be compared against the baseline to surface visual diffs.

#### For Percy Web

Expand All @@ -130,7 +120,7 @@ $ npx percy exec --verbose -- mvn test -P web-percy-after-test
$ npx percy exec --verbose -- mvn test -P automate-percy-after-test
```

On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
On completion, visit your Percy dashboard to see the visual changes detected between the two builds.

### Finished! 😀

Expand Down
13 changes: 7 additions & 6 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,6 @@
<artifactId>testng</artifactId>
<version>${testng.version}</version>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-api</artifactId>
<version>${junit.jupiter.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
Expand Down Expand Up @@ -58,6 +52,13 @@
<suiteXmlFile>${config.file}</suiteXmlFile>
</suiteXmlFiles>
</configuration>
<dependencies>
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>${testng.version}</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
Expand Down
Loading