Merge pull request #19 from roy-de-kleijn/percy

Percy

Author: roy-de-kleijn

README.md

@@ -497,6 +497,75 @@ In this section, we will run the test cases to test the internally hosted websit
   gradle allureServe
   ```
 
+# Percy
+
+[Percy](https://percy.io) provides a visual review platform.
+
+## Prerequisites
+
+- Sign up with your BrowserStack account, or create a new [BrowserStack account](https://www.browserstack.com/users/sign_up).
+- Create a new Percy project.
+- Go to the Project's Settings page, identify your Percy Token, and export them as environment variables using the following commands.
+
+### Installation
+
+1. Install the Percy CLI.
+
+```shell
+npm install @percy/cli
+```
+
+### Export the Percy Token
+
+- For \*nix based and Mac machines:
+
+  ```sh
+  export PERCY_TOKEN=[your-project-token]
+  ```
+
+- For Windows:
+
+  ```shell
+  set PERCY_TOKEN=[your-project-token]
+  ```
+
+## Run your first Visual Test
+
+In this section, we will run the test cases to detect the visual differences. We run the test first, then toggle the property that instructs our test to change some CSS.
+
+1. Run the test.
+   Maven:
+  ```sh
+  npx percy exec -- mvn clean test -P percy
+  ```
+
+Gradle:
+  ```sh
+  npx percy exec -- gradle clean percy
+  ```
+
+2. Set the `changeCSS` property in the `src/test/java/com/browserstack/test/login/LoginVisuaalTest` directory to true.
+
+3. Run the test again.
+
+4. View your Project in the Percy dashboard and verify the differences.
+
+## Run the Ignore Region Test
+
+In this section, we will run the test that ignores a specific area of a webpage. In a real-world situation, you can think of dynamic content and advertisements where this use case applies.
+
+1. Run the test.
+   Maven:
+  ```sh
+  npx percy exec -- mvn clean test -P percy-ignore
+  ```
+Gradle:
+  ```sh
+  npx percy exec -- gradle clean percy-ignore
+  ```
+2. View your Project in the Percy dashboard and verify the differences.
+
+
 ## Additional Resources
 
 - View your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)

build.gradle

@@ -17,6 +17,8 @@ buildscript {
 dependencies {
     implementation 'org.seleniumhq.selenium:selenium-java:3.141.59'
     implementation 'com.browserstack:browserstack-local-java:1.0.6'
+    implementation 'io.percy:percy-java-selenium:1.0.0'
+    implementation 'com.deque.html.axe-core:selenium:4.3.1'
     implementation 'org.testng:testng:7.1.0'
     implementation 'io.qameta.allure:allure-testng:2.13.8'
     implementation 'com.googlecode.json-simple:json-simple:1.1.1'
@@ -96,6 +98,22 @@ tasks.register('bstack-single', Test) {
     }
 }
 
+tasks.register('percy', Test) {
+    useTestNG() {}
+    include '**/LoginVisualTest.class'
+    testLogging {
+        events "PASSED", "FAILED", "SKIPPED"
+    }
+}
+
+tasks.register('percy-ignore', Test) {
+    useTestNG() {}
+    include '**/IgnoreRegionVisualTest.class'
+    testLogging {
+        events "PASSED", "FAILED", "SKIPPED"
+    }
+}
+
 tasks.register('bstack-local', Test) {
     useTestNG() {
         listeners.add("com.browserstack.test.utils.BrowserstackTestStatusListener")

pom.xml

@@ -78,6 +78,11 @@
             <artifactId>browserstack-local-java</artifactId>
             <version>1.0.6</version>
         </dependency>
+        <dependency>
+            <groupId>io.percy</groupId>
+            <artifactId>percy-java-selenium</artifactId>
+            <version>1.0.0</version>
+        </dependency>
         <dependency>
             <groupId>com.deque.html.axe-core</groupId>
             <artifactId>selenium</artifactId>
@@ -225,6 +230,42 @@
                 </plugins>
             </build>
         </profile>
+        <profile>
+            <id>percy</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-surefire-plugin</artifactId>
+                        <configuration>
+                            <includes>
+                                <include>
+                                    com.browserstack.test.suites.login.LoginVisualTest
+                                </include>
+                            </includes>
+                        </configuration>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+        <profile>
+            <id>percy-ignore</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-surefire-plugin</artifactId>
+                        <configuration>
+                            <includes>
+                                <include>
+                                    com.browserstack.test.suites.login.IgnoreRegionVisualTest
+                                </include>
+                            </includes>
+                        </configuration>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
         <profile>
             <id>bstack-local</id>
             <build>

src/test/java/com/browserstack/test/suites/TestBase.java

@@ -3,6 +3,7 @@
 import com.browserstack.local.Local;
 import com.browserstack.test.utils.DriverUtil;
 import com.browserstack.test.utils.ScreenshotListener;
+import io.percy.selenium.Percy;
 import org.json.simple.JSONObject;
 import org.json.simple.parser.JSONParser;
 import org.openqa.selenium.WebDriver;
@@ -34,6 +35,7 @@ public class TestBase {
     private Local local;
     protected WebDriverWait wait;
     private String environment;
+    public static Percy percy;
 
     public WebDriver getDriver() {
         return driver.get();
@@ -83,6 +85,7 @@ public void setUp(@Optional("on-prem") String environment, @Optional("single") S
             dc.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
             driver.set(new RemoteWebDriver(new URL(DOCKER_SELENIUM_HUB_URL), dc));
         }
+        percy = new Percy(getDriver());
         getDriver().get(url);
         getDriver().manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
         wait = new WebDriverWait(getDriver(), 30);

src/test/java/com/browserstack/test/suites/login/IgnoreRegionVisualTest.java

@@ -0,0 +1,23 @@
+package com.browserstack.test.suites.login;
+
+import com.browserstack.test.suites.TestBase;
+import org.openqa.selenium.By;
+import org.openqa.selenium.JavascriptExecutor;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.testng.Assert;
+import org.testng.annotations.Test;
+
+public class IgnoreRegionVisualTest extends TestBase {
+
+    private boolean changeCSS = false;
+
+    @Test
+    public void ignoreLogo() {
+        JavascriptExecutor ex = ((JavascriptExecutor) getDriver());
+        String percyCSS = ".Navbar_logo__26S5Y {visibility: hidden}";
+
+        percy.snapshot("Check Homepage with ignored logo", null, 1024, false, percyCSS);
+    }
+
+}

src/test/java/com/browserstack/test/suites/login/LoginVisualTest.java

@@ -0,0 +1,40 @@
+package com.browserstack.test.suites.login;
+
+import com.browserstack.test.suites.TestBase;
+import org.openqa.selenium.By;
+import org.openqa.selenium.JavascriptExecutor;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.testng.Assert;
+import org.testng.annotations.Test;
+
+public class LoginVisualTest extends TestBase {
+
+    private boolean changeCSS = false;
+
+    @Test
+    public void loginLockedUser() {
+        JavascriptExecutor ex = ((JavascriptExecutor) getDriver());
+
+        percy.snapshot("Check Homepage");
+        getDriver().findElement(By.id("signin")).click();
+        wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#username input")));
+
+        if (changeCSS) {
+            ex.executeScript("document.getElementById('login-btn').style.backgroundColor = '#FFA500';");
+            ex.executeScript("document.getElementById('login-btn').style.width = '60%';");
+        }
+        percy.snapshot("Check Signin page");
+        getDriver().findElement(By.cssSelector("#username input")).sendKeys("locked_user" + Keys.ENTER);
+        getDriver().findElement(By.cssSelector("#password input")).sendKeys("testingisfun99" + Keys.ENTER);
+        getDriver().findElement(By.id("login-btn")).click();
+
+        wait.until(ExpectedConditions.visibilityOfElementLocated(By.className("api-error")));
+        if (changeCSS) {
+            ex.executeScript("document.getElementsByClassName('api-error')[0].style.fontSize = '200%';");
+        }
+        percy.snapshot("Check Login result");
+        Assert.assertEquals(getDriver().findElement(By.className("api-error")).getText(), "Your account has been locked.");
+    }
+
+}