Auto Checking the Latest Version of a Mobile App Version from the Playstore

Project in which this solution is applied: The Senzagro mobile app

Problem

When the user opens the mobile app, the app should fetch the latest version in the play store and compare the current app version and alert the user to update the app if the current version is behind the newest version.

The initial approach was to use the react-native-version-check library. But after a few weeks of implementing it, the feature did not work. There was a problem with the react-native-version-check library since the library fetches the SenzAgro app static HTML page in the google play store and extracts the version. However, recently google play store updated its web page. Hence to view the version the user should click a button as shown below,.

In the following static page, the version of the app is not visible

7th blog

When we click the arrow the following component loads under the same URL. Thus it is not possible to fetch the version by fetching the static page from the given URL.

7th blog 2

Solution

Since we wanted to find a solution for the above, we found an alternative approach to use a web driver to load the above URL in a headless-google chrome browser and click the arrow using the CSS selector of the arrow. This approach was implemented in our SenzAgro-backend by using an API.

Technical Implementation

  • Programming language: Java
  • The framework used: Selenium(A open-source automated testing framework)
  • Backend technology: Spring-boot

STEPS

The following are the main steps that need to be followed to achieve the goal of getting the updated appVesion tag

1. Add the following Maven dependency

<dependancy>
   <groupId>org.seleniumhq.selenium</groupId>
   <artifactId>selenium-java</artifactId>
   <version>3.141.59</version>
</dependancy>

2. Download the Google chrome driver from the following website, which matches your current browser version

3. Specify the location of the web driver which you downloaded

System.setProperty("webdriver.chrome.driver", "/usr/bin/chromedriver");
4. The initialisation of the Chrome Driver

ChromeOptions options = new ChromeOptions();
options.addArguments("--headless", "--disable-gpu", "--window-size=1920,1200", " --ignore-certificate-errors");
driver = new ChromeDriver(options);
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
5. Open the headless browser and navigate to URL

6. Find the arrow button

WebElement button= driver.findElement(By.cssSelector(
   "#yDmH0d > c-wiz.SSPGKf.Czez9d > div > div >
   div.tU8Y5c > div.wkMJlb.YWi3ub > div > div.qZmL0 >
   c-wiz:nth-child(2) > div > section > header > div >
   div:nth-child(2) > button"));
7. Click the button

button.click();
8. Wait until the dynamic component loads

WebDriverWait wait = new WebDriverWait(driver,30);
   wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#yDmH0d >
   div.VfPpkd-Sx9Kwc.cC1eCc.UDxLd.PzCPDd.HQdjr.VfPpkd-S x9Kwc-OWXEXe-FNFY6c > div.VfPpkd-wzTsW > div > div >
   div > div > div.fysCi > div.G1zzid > div:nth-child(1) >
   div.reAt0")));
9. Find the div tag containing the version

WebElement version= driver.findElement(By.cssSelector("#yDmH0d >
div.VfPpkd-Sx9Kwc.cC1eCc.UDxLd.PzCPDd.HQdjr.VfPpkd-Sx9Kwc-OWXEXe-FNF
Y6c > div.VfPpkd-wzTsW > div > div > div > div > div.fysCi > div.G1zzid >
div:nth-child(1) > div.reAt0"));
String appVersion= version.getText();

Now you can compare appVersion with the existing version to identify whether the current app is the latest one and if not you can trigger a pop-up for the user to update the app.