|
| 1 | +package com.applitools.example; |
| 2 | + |
| 3 | +import com.applitools.eyes.BatchInfo; |
| 4 | +import com.applitools.eyes.RectangleSize; |
| 5 | +import com.applitools.eyes.TestResultsSummary; |
| 6 | +import com.applitools.eyes.selenium.BrowserType; |
| 7 | +import com.applitools.eyes.selenium.Configuration; |
| 8 | +import com.applitools.eyes.selenium.Eyes; |
| 9 | +import com.applitools.eyes.selenium.fluent.Target; |
| 10 | +import com.applitools.eyes.visualgrid.model.DeviceName; |
| 11 | +import com.applitools.eyes.visualgrid.model.ScreenOrientation; |
| 12 | +import com.applitools.eyes.visualgrid.services.RunnerOptions; |
| 13 | +import com.applitools.eyes.visualgrid.services.VisualGridRunner; |
| 14 | +import org.openqa.selenium.By; |
| 15 | +import org.openqa.selenium.WebDriver; |
| 16 | +import org.openqa.selenium.chrome.ChromeDriver; |
| 17 | +import org.openqa.selenium.chrome.ChromeOptions; |
| 18 | + |
| 19 | +import java.time.Duration; |
| 20 | + |
| 21 | + |
| 22 | +public class AcmeBankTests { |
| 23 | + // This class contains everything needed to run a full visual test against the ACME bank site. |
| 24 | + // It runs the test once locally, |
| 25 | + // and then it performs cross-browser testing against multiple unique browsers in Applitools Ultrafast Grid. |
| 26 | + // It runs the test from a main function, not through a test framework. |
| 27 | + |
| 28 | + // Test control inputs to read once and share for all tests |
| 29 | + private String applitoolsApiKey; |
| 30 | + private boolean headless; |
| 31 | + |
| 32 | + // Applitools objects to share for all tests |
| 33 | + private BatchInfo batch; |
| 34 | + private Configuration config; |
| 35 | + private VisualGridRunner runner; |
| 36 | + |
| 37 | + // Test-specific objects |
| 38 | + private WebDriver driver; |
| 39 | + private Eyes eyes; |
| 40 | + |
| 41 | + public void setUpConfigAndRunner() { |
| 42 | + // This method sets up the configuration for running visual tests in the Ultrafast Grid. |
| 43 | + |
| 44 | + // Read the Applitools API key from an environment variable. |
| 45 | + // To find your Applitools API key: |
| 46 | + // https://applitools.com/tutorials/getting-started/setting-up-your-environment.html |
| 47 | + applitoolsApiKey = System.getenv("APPLITOOLS_API_KEY"); |
| 48 | + |
| 49 | + // Read the headless mode setting from an environment variable. |
| 50 | + // Use headless mode for Continuous Integration (CI) execution. |
| 51 | + // Use headed mode for local development. |
| 52 | + headless = Boolean.parseBoolean(System.getenv().getOrDefault("HEADLESS", "true")); |
| 53 | + |
| 54 | + // Create the runner for the Ultrafast Grid. |
| 55 | + // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel. |
| 56 | + // Warning: If you have a free account, then concurrency will be limited to 1. |
| 57 | + runner = new VisualGridRunner(new RunnerOptions().testConcurrency(5)); |
| 58 | + |
| 59 | + // Create a new batch for tests. |
| 60 | + // A batch is the collection of visual checkpoints for a test suite. |
| 61 | + // Batches are displayed in the dashboard, so use meaningful names. |
| 62 | + batch = new BatchInfo("Example: Selenium Java Basic with the Ultrafast Grid"); |
| 63 | + |
| 64 | + // Create a configuration for Applitools Eyes. |
| 65 | + config = new Configuration(); |
| 66 | + |
| 67 | + // Set the Applitools API key so test results are uploaded to your account. |
| 68 | + // If you don't explicitly set the API key with this call, |
| 69 | + // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it. |
| 70 | + config.setApiKey(applitoolsApiKey); |
| 71 | + |
| 72 | + // Set the batch for the config. |
| 73 | + config.setBatch(batch); |
| 74 | + |
| 75 | + // Add 3 desktop browsers with different viewports for cross-browser testing in the Ultrafast Grid. |
| 76 | + // Other browsers are also available, like Edge and IE. |
| 77 | + config.addBrowser(800, 600, BrowserType.CHROME); |
| 78 | + config.addBrowser(1600, 1200, BrowserType.FIREFOX); |
| 79 | + config.addBrowser(1024, 768, BrowserType.SAFARI); |
| 80 | + |
| 81 | + // Add 2 mobile emulation devices with different orientations for cross-browser testing in the Ultrafast Grid. |
| 82 | + // Other mobile devices are available, including iOS. |
| 83 | + config.addDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.PORTRAIT); |
| 84 | + config.addDeviceEmulation(DeviceName.Nexus_10, ScreenOrientation.LANDSCAPE); |
| 85 | + } |
| 86 | + |
| 87 | + public void openBrowserAndEyes() { |
| 88 | + // This method sets up each test with its own ChromeDriver and Applitools Eyes objects. |
| 89 | + |
| 90 | + // Open the browser with the ChromeDriver instance. |
| 91 | + // Even though this test will run visual checkpoints on different browsers in the Ultrafast Grid, |
| 92 | + // it still needs to run the test one time locally to capture snapshots. |
| 93 | + driver = new ChromeDriver(new ChromeOptions().setHeadless(headless)); |
| 94 | + |
| 95 | + // Set an implicit wait of 10 seconds. |
| 96 | + // For larger projects, use explicit waits for better control. |
| 97 | + // https://www.selenium.dev/documentation/webdriver/waits/ |
| 98 | + // The following call works for Selenium 4: |
| 99 | + driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10)); |
| 100 | + |
| 101 | + // If you are using Selenium 3, use the following call instead: |
| 102 | + // driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); |
| 103 | + |
| 104 | + // Create the Applitools Eyes object connected to the VisualGridRunner and set its configuration. |
| 105 | + eyes = new Eyes(runner); |
| 106 | + eyes.setConfiguration(config); |
| 107 | + |
| 108 | + // Open Eyes to start visual testing. |
| 109 | + // It is a recommended practice to set all four inputs: |
| 110 | + eyes.open( |
| 111 | + driver, // WebDriver object to "watch" |
| 112 | + "ACME Bank Web App", // The name of the app under test |
| 113 | + "Log into bank account", // The name of the test case |
| 114 | + new RectangleSize(1024, 768)); // The viewport size for the local browser |
| 115 | + } |
| 116 | + |
| 117 | + public void logIntoBankAccount() { |
| 118 | + // This test covers login for the Applitools demo site, which is a dummy banking app. |
| 119 | + // The interactions use typical Selenium WebDriver calls, |
| 120 | + // but the verifications use one-line snapshot calls with Applitools Eyes. |
| 121 | + // If the page ever changes, then Applitools will detect the changes and highlight them in the dashboard. |
| 122 | + // Traditional assertions that scrape the page for text values are not needed here. |
| 123 | + |
| 124 | + // Load the login page. |
| 125 | + driver.get("https://demo.applitools.com"); |
| 126 | + |
| 127 | + // Verify the full login page loaded correctly. |
| 128 | + eyes.check(Target.window().fully().withName("Login page")); |
| 129 | + |
| 130 | + // Perform login. |
| 131 | + driver.findElement(By.id("username")).sendKeys("applibot"); |
| 132 | + driver.findElement(By.id("password")).sendKeys("I<3VisualTests"); |
| 133 | + driver.findElement(By.id("log-in")).click(); |
| 134 | + |
| 135 | + // Verify the full main page loaded correctly. |
| 136 | + // This snapshot uses LAYOUT match level to avoid differences in closing time text. |
| 137 | + eyes.check(Target.window().fully().withName("Main page").layout()); |
| 138 | + } |
| 139 | + |
| 140 | + public void cleanUpTest() { |
| 141 | + |
| 142 | + // Quit the WebDriver instance. |
| 143 | + driver.quit(); |
| 144 | + |
| 145 | + // Close Eyes to tell the server it should display the results. |
| 146 | + eyes.closeAsync(); |
| 147 | + |
| 148 | + // Warning: `eyes.closeAsync()` will NOT wait for visual checkpoints to complete. |
| 149 | + // You will need to check the Applitools dashboard for visual results per checkpoint. |
| 150 | + // If you want to wait synchronously for all checkpoints to complete, then use `eyes.close()`. |
| 151 | + } |
| 152 | + |
| 153 | + public void printResults() { |
| 154 | + |
| 155 | + // Close the batch and report visual differences to the console. |
| 156 | + // Note that it forces execution to wait synchronously for all visual checkpoints to complete. |
| 157 | + TestResultsSummary allTestResults = runner.getAllTestResults(); |
| 158 | + System.out.println(allTestResults); |
| 159 | + } |
| 160 | + |
| 161 | + public static void main(String [] args) { |
| 162 | + |
| 163 | + // Construct the test object |
| 164 | + AcmeBankTests tests = new AcmeBankTests(); |
| 165 | + |
| 166 | + try { |
| 167 | + // Safely perform setup |
| 168 | + tests.setUpConfigAndRunner(); |
| 169 | + tests.openBrowserAndEyes(); |
| 170 | + |
| 171 | + // Run the test steps |
| 172 | + tests.logIntoBankAccount(); |
| 173 | + } |
| 174 | + catch (Exception e) { |
| 175 | + e.printStackTrace(); |
| 176 | + } |
| 177 | + finally { |
| 178 | + // No matter what, perform cleanup |
| 179 | + tests.cleanUpTest(); |
| 180 | + tests.printResults(); |
| 181 | + } |
| 182 | + } |
| 183 | +} |
0 commit comments