Gist for the website

//----------------------------------------------------------------------
//CASE 1: Test Login page (BEFORE):
//-----------------------------------------------------------------------

//Lots of code to test a simple login page
@Test
public void loginTest() {
  //Open browser
  driver.get("https://demo.applitools.com/loginBefore.html");
  
  //Click on the Login button
  driver.findElement(By.id("log-in")).click();
  
  //Assert the error text
  assertEquals("Please enter username and password",
  driver.findElement(By.id("alert")).getText());
  
  //Assert if username field exists
  assertTrue((driver
  .findElement(By.id("username")) instanceof WebElement));
  
  //Assert username placeholder text
  assertEquals("Enter your username",driver
  .findElement(By.id("username")).getAttribute("placeholder"));
  
  //Assert username label exists
  assertEquals("Username", driver
   .findElement(By.xpath("(//label)[1]")).getText());
  
  //Assert if password field exists
  assertTrue((driver.findElement(By.id("password"))
   instanceof WebElement));
  
  //Assert password placeholder text
  assertEquals("Enter your password",
  driver.findElement(By.id("password"))
  .getAttribute("placeholder"));
  
  //Assert password label exists
  assertEquals("Password", driver
   .findElement(By.xpath("(//label)[2]")).getText());
    
  //Assert if SignIn button field exists
  assertTrue((driver
   .findElement(By.id("log-in")) instanceof WebElement));
  
  //Assert if SignIn buttons label is "Sign In"
  assertEquals("Sign in", driver
   .findElement(By.id("log-in")).getText());
  
  //Assert Remember Me checkbox exists
  assertTrue((driver
   .findElement(By.xpath("//input[@class='form-check-input']"))
   instanceof WebElement));
  
  //Assert if Remember Me text exists
  assertEquals("Remember Me", driver
   .findElement(By.xpath("(//label)[3]")).getText());
  
  //Assert if Twitter button exists
  assertTrue(driver
   .findElement(By.xpath("//form//a[1]//img[1]"))
    instanceof WebElement);
  
  //Assert if Facebook button exists
  assertTrue(driver
   .findElement(By.xpath("//a[2]//img[1]"))
    instanceof WebElement);
}

//----------------------------------------------------------------------
//CASE 1: Test Login page (AFTER):
//----------------------------------------------------------------------
//Use Selenium (or Cypress) for browser automation. Let the Visual AI take a screenshot and do the work
@Test
public void loginTest() {
	//Open browser
	driver.get("https://demo.applitools.com/loginBefore.html");
	
	//Click on the Login button
	driver.findElement(By.id("log-in")).click();
	
	//Start the test
	eyes.open(driver, "Login App", "Login Page Test");
	
	//Take a screenshot so AI can analyze
	eyes.check(Target.window().fully().withName("Login page"));
	
	//End the test
	eyes.closeAsync();	
}

//----------------------------------------------------------------------
//CASE 2: Test Stability (BEFORE):
//-----------------------------------------------------------------------

//Lots of locators and Text labels that can easily change and break your tests
@Test
public void loginTest() {
	//Open browser
	driver.get("https://demo.applitools.com/loginBefore.html");
	
	//Click on the Login button
	driver.findElement(By.id("log-in")).click();
	
	//Assert the error text
	assertEquals("Please enter username and password", 
			driver.findElement(By.id("alert")).getText());
	
	//Assert if username field exists
	assertTrue((driver.findElement(By.id("username")) instanceof WebElement));

	//Assert username placeholder text
	assertEquals("Enter your username", 
			driver.findElement(By.id("username")).getAttribute("placeholder"));
	
	//Assert username label exists
	assertEquals("Username", driver.findElement(By.xpath("(//label)[1]")).getText());

	
	//Assert if password field exists
	assertTrue((driver.findElement(By.id("password")) instanceof WebElement));
	
	//Assert password placeholder text
	assertEquals("Enter your password", 
			driver.findElement(By.id("password")).getAttribute("placeholder"));
	
	// 10 more such assertions...

}


//----------------------------------------------------------------------
//CASE 2: Test Stability (AFTER):
//-----------------------------------------------------------------------

//Uses few locators for mainly navigation and no labels making your code highly stable!
@Test
public void loginTest() {
	//Open browser
	driver.get("https://demo.applitools/loginBefore.html");
	
	//Click on the Login button
	driver.findElement(By.id("log-in")).click();
	
	//Start the test
	eyes.open(driver, "Login App", "Login Page Test");
	
	//Take a screenshot so AI can analyze
	eyes.checkWindow("Login Window");
	
	//End the test
	eyes.closeAsync();	
}

//----------------------------------------------------------------------
//CASE 3: Test Complexity (BEFORE):
//-----------------------------------------------------------------------

//Very complex code to verify if a table's columb is sorted properly
//You need to literally recreate sorting in your test code to verify it!
@Test
public void tableSortingTest() throws InterruptedException {
	//Open the app
	driver.get("https://demo.applitools.com/hackathonApp.html");
	
	//Click on the Rank column
	driver.findElement(By.id("amount")).click();

	//Get the 2nd column's elements using CSS Selector
	List<WebElement> elementsList = driver.findElements(By.cssSelector("tr td:nth-child(1)"));
	
	//Extract the text from each element and store it in a list
	ArrayList<String> originalList = new ArrayList<String>();
	for(int i =0; i < elementsList.size(); i++) {
		originalList.add(elementsList.get(i).getText());
	}
	
	//Create a copy so we can sort this and compare with what we get from the UI
	ArrayList<String> copiedList = new ArrayList<String>();
	for(int i =0; i < originalList.size(); i++) {
		copiedList.add(originalList.get(i));
	}
	
	System.out.println(copiedList);
	
	//Sort the copied list
	Collections.sort(copiedList);
	
	System.out.println(copiedList);
	//assert
	assertTrue(originalList.equals(copiedList));

	//Close
	driver.close();
}

//----------------------------------------------------------------------
//CASE 3: Test Complexity (AFTER):
//-----------------------------------------------------------------------

//Simple code. Just take a screenshot after the table is sorted. If the sorting breaks,
//the screenshot will be different from before and you found the sorting bug!
@Test
public void tableSortingTest() {
	//Open the app
	driver.get("https://demo.applitools.com/hackathonApp.html");
	
	//Click on the Rank column
	driver.findElement(By.id("amount")).click();

	//Start the test
	eyes.open(driver, "Table Sort App", "Number Column Sort Test");
	
	//Take a screenshot so AI can analyze
	eyes.checkWindow("Window with Table");
	
	//End the test
	eyes.closeAsync();	
}