Sales: contact@spurqlabs.com

HR: hr@spurqlabs.com

Book A Demo
Automating biometric authentication on iOS using BrowserStack

Automating biometric authentication on iOS using BrowserStack

by | Jul 17, 2022 | Blog

Introduction:-

Today, almost all mobile devices support biometric authentication, such as Touch ID/Fingerprint Sensors and Face ID. Using the Browser Stack Android/iOS testing platform, developers can test their mobile applications using biometric authentication. In Automating biometric authentication on iOS using BrowserStack users can be authenticated using biometrics.

Note – This feature is currently not available for Android devices.

My application uses biometric authentication when it relaunches (relaunching means that the user is logged in and the app is closed from the background). Let’s look at a practical example.

How to check biometric authentication:

You can check Biometric authentication in an App Automate session by following these steps:

  1. A browser Stack Appium session can be enabled with Biometrics by using the following Browserstack Appium capability: BrowserStack.enable biometric:”true”
  2. As shown below, this capability ensures that your app passes through Sensor Instrumentation.
def before_scenario(context,scenario):
	if context.config.userdata["executionMode"]=="Browserstack":
	context.driver =webdriver.Remote(
	command_executor='https://'+context.config.userdata["userName"]+':'+context.config.u
	serdata["accessKey"]+'@hub-cloud.browserstack.com/wd/hub',
	desired_capabilities={
		"platformName": "iOS",
		"build": context.config.userdata["browserstack_build"],
		"device": context.config.userdata["browserstack_device"],
		"os_version": context.config.userdata["device_os_version"],
		"app":context.config.userdata["browserstack_appUrl"],
		"nativeWebTap":True,
		"browserstack.enableBiometric": True    #desired Capability
		}
		)
	elif context.config.userdata["executionMode"]=="Emulator":
	context.driver = webdriver.Remote(
	.
	.
	.

By using the ‘before scenario’ context in the ‘environment.py’ file, this Python code creates the desired capability. As a result of using this capability, we get the following screen when it is executed.

How to interact with the Biometric authentication dialog:

Using the custom executor, you can manipulate the Automating biometric authentication on iOS using BrowserStack dialog box.

Following are the complete scenario and required steps with the page file code.

Scenario: User Login by biometric after app relaunch
Given User is on "Welcome" page		
And User does Login with "Username" and "Password"
When User creates security pin for "Username"  
# creates security step depends on application
And User closes app and relaunch the app
Then User clicks "Pass" on biometric alert screen
#Then User clicks "Fail" on biometric alert screen

Step definition file –

@then('I click "{option}" on biometric alert screen')
def step_impl(context,option):
	context.signIn.clickon_pass(option)

Page file –

def clickon_pass(self,option):
	self.driver.find_element_by_accessibility_id(option).click()
	sleep(5)

Note: – There are two options here ‘Pass’ or ‘Fail’

The application opens when the user clicks ‘Pass’ on the authentication alert screen.

If you click “Fail” on the authentication alert screen, the application will request that you re-login with your forgotten pin or security pin instead of biometric information.

This feature supports native apps & apps built with cross-platform frameworks such as React Native, Flutter, etc. The BrowserStack Biometric feature supports Biometric APIs. only if the app uses one of the supported Biometric APIs. A biometric API can be used with the approval of the app development team on Android and iOS.

Conclusion:

The BrowserStack platform with Appium capabilities allows developers and testers to test mobile applications with Biometric Authentication.

Read more blogs here

How to automate office 365 login in cypress using Nightwatch.js

How to automate office 365 login in cypress using Nightwatch.js

by | Jul 17, 2022 | Blog

This blog will explore how to automate office 365 login in cypress using Nightwatch.js. Currently, I’m working on Cypress automation for testing web applications.

First, let’s understand the problem area.

We needed to automate the login flow in an application using office 365’s IDP. When we launched the application through cypress, we landed on the office 365 login screen which was not possible to automate. We were not able to have control over the page through cypress. Cypress has some other techniques to automate this like SSO(single-sign-on) However, our clients were not able to share some secrets and also the Azure DevOps environment.

So far nothing worked for us, So now let’s come to the point.

In order to automate office 365 login in cypress using Nightwatch.js. I thought we could use other tools to get the JWT token that we can use to log into an application through Cypress.

Now, the question was which tools to be selected. 

I selected Nightwach.js tools because it was easy to use with little configuration. We successfully automated office 365 login. Get the JWT token from local storage and write it in common utility files.

Again the question was how to trigger the Nightwatch.js script through cypress.

Cypress supports cy. exec command runs the Nightwatch.js script and then control comes back to cypress and the rest execution is done.

  • Now let us try the recipe, First install nightwatch.js with the following command, Copy
npm install nightwatch
  • And also need to install the chrome driver with the following command, Copy
npm install chromedriver --detect_chromedriver_version

And also created a script for nightwatch.js

In the below code, we are reading JWT Token from local storage and storing it into jwtToken.txt

module.exports =
{
  '@tags': ['adm'],
  "test": function (browser) {
    let ch
    browser.url("Application url")
    browser.click('#details-button')
    browser.click('#proceed-link')
    browser.click('span[class="microsoft-logo"]')
    browser.setValue('#i0116', 'email')
    browser.click('#idSIButton9')
    browser.setValue('#i0118', 'password')
    browser.click('#idSIButton9')
    browser.click('#idBtn_Back')
    browser.execute(function () {
      ch = window.localStorage.getItem('jwtToken');
      return ch
    }, [], function (result) {
      this.assert.equal(result.value, result.value
      const fs = require('fs'
      const path = require('path');
      const dirPath = path.join(__dirname, '../cypress/fixtures/jwtToken.txt')
      var path2 = dirPath.replace(/\\/g, "/");
      console.log(path2)
      fs.writeFile(path2, result.value, err => {
        if (err) {
          console.error(err)
          return
        }
      })
    })
  }
}
  • Add the following command in support/command.js
Cypress.Commands.add("User", () => {
  cy.exec("npx nightwatch -e chrome ")
})
  • Add the following code in the hooks file to use the JWT token in your tests reading the jwtToken.txt
Before({ tags: "@user" }, () => {
  cy.readFile('cypress/fixtures/jwtToken.txt').then((jwtToken) => {
    cy.log("JWT Token before : " + jwtToken)
  })
  cy.log('start')
  cy.User()
  cy.log('end')
  cy.readFile('cypress/fixtures/jwtToken.txt').then((jwtToken) => {
    cy.log("JWT Token After : " + jwtToken)
    cy.window().then(
      window => window.localStorage.setItem('jwtToken',jwtToken), { flag: 'w' })
      cy.visit(Cypress.config('apiLoginURL'))
  })
})

The output is that a new JWT token is generated and that the JWT token is used to run cypress test cases.

JWT Token in Cypress Test

Conclusion :

 Different automation tools can be integrated with Cypress where Cypress lacks the ability to do so. In the previous version of Cypress, multi-domain origins were not supported, so we automated this scenario through Nightwatch.js.

Read more blogs here