Guru99 EComerce Project test automation with Playwright

Purpose

The purpose of this project is to perform E2E test automation for the Guru99 EComerce project. Subscription for this project is available here. Note that it is originally oriented towards Selenium and Java, but I choose to automate it on Playwright with JavaScript.

Tools,Platforms, Browsers

• Language: JavaScript
• Framework: Playwright
• Platform: Windows
• Browser: Chrome
• Reporting Tool: Allure Report

In scope:

• E2E Web UI

Out of scope:

-API -Credit card payment as it does not work

• register new account section. All tests will be automated with already created account.

NOTE: GURU 99 does not provide any documentation for this project at all in comparason with other their projects like GURU 99 Bank Project.

Test cases to automate:

• Test cases, provided by Guru99 as part of their timeboxed live project demo.

Test cases, provided by Guru99

This test case will be automated as is. - done

This test case will be split to 3 separate test cases:

1. Try to purchase more qty than what is available in the store and check the error message. - done
2. Verify that when entering empty shopping cart there is a message sayng "SHOPPING CART IS EMPTY". - done
3. Remove all products from the shopping cart and verify that a message sayng "SHOPPING CART IS EMPTY" is displayed. - done

This test case will be automated as is - done.

This test case will be automated using an existing account, because newly created users cannot be deleted from the database. Should you attempt to repeat the test case with the same test data, the system will throw an error that this user already exists. - done

This test case will be automated as is. - done

Test Constraints. When the Print Order link is selected a new browser tab opens, and in this new tab there is a pdf download pop-up. There is no actual download process going through the browser. Instead the user can click a Save buton to save the file in pdf format in the Downloads folder where again one has to click on the Save As button from the System prompt. Since Playwright cannot interact with System prompts and we cannot automate the click on the Save button, another approach is followed. Instead we save the entire page in pdf format. However it is still up for discussion whether this is the right course to take in this case, or we better not automate this test case. Converted page to pdf is saved in the Downloads folder in the project. - done

This test case will be automated as is. - done This test case will not be automated because the given discount is not deducted from the final price as seen in the screenshot below:

Project Notes

Test Case 1

Solution, provided by Guru99

import java.io.File;
import org.testng.annotations.AfterTest;
import org.testng.annotations.Test;
import org.testng.annotations.BeforeTest;
import org.testng.AssertJUnit;
import java.util.concurrent.TimeUnit;
import org.testng.annotations.*;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.*;
import org.openqa.selenium.By;


public class TestCase1 {
	  private WebDriver driver;
	  private String baseUrl;
	  public int scc = 0;
	  
	  private StringBuffer verificationErrors = new StringBuffer();

	  @BeforeMethod
	@BeforeTest
	public void setUp() throws Exception {
	    driver = new FirefoxDriver();
		// Step 1 Goto http://live.techpanda.org/
	    baseUrl = "http://live.techpanda.org/";
	    driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
	  }
	  @Test
	  public void testDay1TestCase1() throws Exception {
		
	    driver.get(baseUrl); 
		//Step 2. Verify Title of the page
	    String demoSite  = driver.findElement(By.cssSelector("h2")).getText();
	    System.out.println(demoSite);
	    try {
	      AssertJUnit.assertEquals("THIS IS DEMO SITE FOR   ", demoSite);
	    } catch (Error e) {
	      verificationErrors.append(e.toString());
	    }	    
	    

	    // Step 3. Click on �MOBILE� menu
	    driver.findElement(By.linkText("MOBILE")).click();	
        // Step 5. In the list of all mobile , select �SORT BY� dropdown as �name�		
	    new Select(driver.findElement(By.cssSelector("select[title=\"Sort By\"]"))).selectByVisibleText("Name");
	    
	    // Step 6. Verify all products are sorted by name
		// this will take a screen shot of the manager's page after a successful login
	    scc = (scc+1);
		File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
		String png = ("C:\\Guru99 eCommerce Live Project\\Day01_TestCase1\\Mobile Products are sorted" + scc + ".png");
		FileUtils.copyFile(scrFile, new File(png));
	    }	
	  
	@AfterTest
	public void tearDown() throws Exception {
		driver.quit();
	   
	  }	  
	}

Some thoughts on this here

It is clear from the code above, that they take a screenshot after filtering the products by Name (rows 85 to 92). However this only takes the screenshot. It does not prove clearly whether the devices are sorted in the expected order, thus making this case prone to giving false positive results. To know for sure whether case passes or fails, one has to open the screenshot manually and see for himself. This complicates the test case as it involves taking additional steps for verification. One way to avoid this, is to have a second screenshot with the expected resut and compare it versus the actual image taken. However further issues might arise:

1. Selenium WebDrtiver cannot compare images directly. To do this, we need a third-party API, such as [AShot](https://spurqlabs.com/image-comparison-using-java-selenium/#:~:text=Image%20comparison%20cannot%20be%20directly,us%20to%20compare%20two%20images. Thus we increase the number of 3rd parties we depend on.
2. The test case might fail due to the expected image no longer reflects the current state of the database (depending on when it is taken). Meaning there might be new devices added in the database which now show in the UI, or some divices might be hidden at a database level, thus making them invisible to the customer.

The image below shows devices available for purchase versus all devices from that brand in the database. Note that only one device is currently available for purchase:

My approach The first test case will be split to 3 separate test cases as follows:

1. Check the title of the landing page. - done

2. Check the title of the mobile page. - done

3. Chek if the products are sorted by name following these steps: done
   3.1. From the main page click on Mobile.

   3.2. Grab the names of all products andstore them in a sorted array (A - Z).

   3.3. Click on Sort By Name.

   3.4. Grab the names of all sorted products and store them in another array.

   3.5. Compare both arrays value by value.

   3.6. Assert they are equal.

4.Additional test case: Sort products by price -> Repeat steps 3.1. to 3.6. - done