Selenium Java tutorial

Please select a Tutorial



1. Introduction In real world testing, you'll need to test your app on multiple browsers, viewports and mobile devices. So you'll need to run and re-run ALL the tests in different browsers and multiple viewports to ensure things are fine - which could take hours and hours to complete. You may also encounter browsers not opening properly, or hanging and what not.

What if you could run in just one browser, just once, and still do cross-browser tests across various browsers, viewports and multiple mobile emulators? That's where Visual Grid [BETA] comes in.

TL;DR

When you execute this tutorial, it'll run the test locally in Chrome browser but will show results in the following 5 combinations:

  1. Chrome browser (800 X 600 viewport)
  2. Chrome browser (700 X 500 viewport)
  3. Firefox browser (1200 X 800 viewport)
  4. Firefox browser (1600 X 1200 viewport)
  5. An iPhone4 emulator

... all in ~30 seconds!⏰🚀

2. The Visual Grid

The Visual Grid[BETA] provides an elegant and an ultra fast way to render pages in different browsers, viewports and mobile simulators and then take screenshots and then send those screenshots to Applitools AI server. With Visual Grid you just need to run your test in a single browser but perform end-to-end and cross-browser tests in various browsers such as Chrome,Firefox, IE, and also numerous combinations of viewports and in mobile simulators -- all in under a minute. Without Visual Grid, you'll be wasting a lot of time and money running those tests in multiple browsers which could take hours and are error-prone.

And since Visual Grid is integrated with our Eyes AI, you'll actually find a lot more functional and visual bugs than you'd normally find.

Further, you can use our Root-Cause-Analysis (RCA) feature to figure out exactly which DOM element or CSS caused difference! So you can go backwards, from the screenshot to the code!

Best part: All you need to do is to simply make eyes.check calls in your existing Selenium tests after adding our SDK and instantiating Visual Grid. And that's all there is to it!

How it works

Once you add and instantiate the Applitools SDK, simply add eyes.check calls wherever you want to check if the state of the page looks OK. Then run the Selenium test as usual. And while running the tests, anytime it encounters eyes.check (or similar methods), Applitools SDK uploads the DOM resource of that page to our Visual Grid behind the scenes and in batches. The Visual Grid then renders every page in different browsers and mobile emulators (in parallel) and takes screenshots as per the configuration you set. Finally, it sends those screenshots to our AI Server.

When you first run the test, our AI server simply stores those 1st set of screenshots as Baseline images. When you run the same test again, the AI server will compare the new set of screenshots, aka Checkpoint images, with the corresponding Baseline images and higlights bugs.

Visual Grid architecture picture
3. Marking tests as pass or fail

When the AI compares the baseline and checkpoint image, if it finds a legitimate difference, it'll mark the test as "Undecided". You need to then login to our dashboard and then either mark it as "Fail" or "Pass" manually. If you mark it as a "Fail", any further runs with similar difference will be automatically marked as "Failed" tests. If you mark it as a "Pass", then we update the new checkpoint image as the new "Baseline" and if you run tests again we'll consider those as "Passed" tests.

Note:

  • Visual Grid is currently in Early access.

  • Visual Grid does not run tests, it just opens/renders webpages in different browsers, in different viewports, and in mobile emulators, in landscape and portrait modes. You still need to run a single set of tests either on a local machine or in the cloud (like AWS, GCloud, Azure or in commercial testing vendor clouds). But you don't need to run all the tests on each browsers and each mobile devices and emulators.

  • Applitools AI has been trained with 100s of millions of images. It doesn't do a pixel-by-pixel comparison because it leads to a lot of false positives, but instead simulates real human eyes and ignore normal differences that humans would ignore and only highlight those that humans would highlight as bugs.

  • ACCURACY: A.I's current accuracy rate is 99.999%! Which means for most applications that odds that you'll see false-positives is 1 in a million!

4. Get Started 🚀

Pre-requisites:

  1. Have Java 8 or higher installed
  2. Install Eclipse or IntelliJ editor
  3. Chrome Webdriver is on your machine and is in the PATH. Here are some resources from the internet that'll help you.

Option 1: Github Repo

  1. Get the code:

    • git clone git clone https://github.com/applitools/tutorial-selenium-java-visualgrid.git,
    • or, download it as a Zip file and unzip it.
  2. Open the folder as a Maven file in Eclipse or IntelliJ.

  3. Change the Applitools API key in the VisualGridDemo.java. Get the API key by logging into Applitools > Person Icon > My API Key

  4. Run the test

Option 2: Manual

1. Create a Maven project and add the following properties and dependencies to the pom.xml

TIP

See the complete pom.xml here

	<!-- Use JDK 10 -->
	<properties>
		<maven.compiler.source>10</maven.compiler.source>
		<maven.compiler.target>10</maven.compiler.target>
	</properties>

	<dependencies>
		<!-- This is the Applitools Selenium Java SDK -->
		<dependency>
		 <groupId>com.applitools</groupId>
		 <artifactId>eyes-selenium-java3</artifactId>
		 <version>3.151.2</version>
		</dependency>
		<!-- Required to run "mvn package" which runs test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>

		<!-- Required for Java 10 -->
		<dependency>
			<groupId>javax.activation</groupId>
			<artifactId>activation</artifactId>
			<version>1.1.1</version>
		</dependency>

	</dependencies>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. Create a class with name VisualGridDemo.java and add the following code. And replace the APPLITOOLS_API_KEY with your own.


package com.applitools.quickstarts;


import com.applitools.eyes.selenium.BrowserType;
import com.applitools.eyes.selenium.Configuration;
import com.applitools.eyes.selenium.Eyes;
import com.applitools.eyes.selenium.fluent.Target;
import com.applitools.eyes.visualgrid.model.DeviceName;
import com.applitools.eyes.TestResultsSummary;
import com.applitools.eyes.visualgrid.services.VisualGridRunner;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;



import com.applitools.eyes.BatchInfo;

public class VisualGridDemo {

	public static void main(String[] args) {
		VisualGridDemo program = new VisualGridDemo();
		program.runTest();
	}
	
	public static Eyes initializeEyes(VisualGridRunner runner) {
		// Create Eyes object with the runner, meaning it'll be a Visual Grid eyes.
		Eyes eyes = new Eyes(runner);

		// Set API key
		eyes.setApiKey("APPLITOOLS_API_KEY");
		
		//If dedicated or on-prem cloud, uncomment and enter the cloud url
		//Default: https://eyes.applitools.com
		//eyes.setServerUrl("https://testeyes.applitools.com"); 


		// Create SeleniumConfiguration.
		Configuration sconf = new Configuration();

		// Set the AUT name
		sconf.setAppName("Bank App");

		// Set a test name
		sconf.setTestName("Smoke Test via Visual Grid");

		// Set a batch name so all the different browser and mobile combinations are
		// part of the same batch
		sconf.setBatch(new BatchInfo("VIP Browser combo batch"));

		// Add Chrome browsers with different Viewports
		sconf.addBrowser(800, 600, BrowserType.CHROME);
		sconf.addBrowser(700, 500, BrowserType.CHROME);

		// Add Firefox browser with different Viewports
		sconf.addBrowser(1200, 800, BrowserType.FIREFOX);
		sconf.addBrowser(1600, 1200, BrowserType.FIREFOX);

		// Add iPhone 4 device emulation
		sconf.addDeviceEmulation(DeviceName.iPhone_4);

		// Set the configuration object to eyes
		eyes.setConfiguration(sconf);
		
		return eyes;
	}

	private void runTest() {

		// Create a runner with concurrency of 10
		VisualGridRunner runner = new VisualGridRunner(10);

		//Initialize Eyes with Visual Grid Runner
		Eyes eyes = initializeEyes(runner);
		
		// Create a new Webdriver
		WebDriver webDriver = new ChromeDriver();

		// Navigate to the URL we want to test
		webDriver.get("https://demo.applitools.com");

		// To see visual bugs, change the above URL to:
		// https://demo.applitools.com/index_v2.html and run the test again


		// Call Open on eyes to initialize a test session
		eyes.open(webDriver);

		// Check the Login page
		eyes.check(Target.window().fully().withName("Step 1 - Login page"));

		// Click on the Login button to go to the App's main page
		webDriver.findElement(By.id("log-in")).click();

		// Check the App page
		eyes.check(Target.window().fully().withName("Step 2 - App Page"));

		// Close the browser
		webDriver.quit();

		System.out.println(
				"Please wait... we are now: \n1. Uploading resources, \n2. Rendering in Visual Grid, and \n3. Using Applitools A.I. to validate the checkpoints. \nIt'll take about 30 secs to a minute...");

		// Close eyes and collect results
		eyes.closeAsync();
		TestResultsSummary allTestResults = runner.getAllTestResults();
		System.out.println(allTestResults);

	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

3. To see visual bugs:

After you run one set of tests, you now have the baselines. Run the same test but with this URL: https://demo.applitools.com/index_v2.html. This version of the demo app has some visual bugs so you can see how it all works. And the second set of screenshots are called "Checkpoint images".

Resources




Terms & Conditions Privacy Policy GDPR© 2019 Applitools. All rights reserved.

Last Updated: 8/19/2019, 5:24:08 PM