What are the android capabilities I should use if my app use chrome custom tabs?

Question

I am new to mobile automation and facing some challenges while automating my application. My application uses chrome custom tabs. The transition happens when I click on login button on android native screen, it redirects me to login page where our developer is using chrome custom tabs. When I am running my test locally with below android.config capabilities, I can able to click to click on login button but once the login page of web is open I could not able to query or interact with those elements.

My current capabilities are:

config.capabilities = [ { platformName: 'Android', noReset: true, fullReset: false, maxInstances: 1, automationName: 'uiautomator2', deviceName: AndroidInfo.deviceName(), platformVersion: AndroidInfo.platFormVersion(), app: AndroidInfo.appName(), }, ];

My package.json is:

{ "name": "integration-tests", "version": "1.0.0",
"description": "Project to run native and browser fro android and ios using cucumber", "main": "index.js", "scripts": { "build": "tsc", "clean": "rimraf typeScript/", "clean-build": "npm run clean && npm run build", "android": "wdio ./config/android.config.ts", "ios": "wdio ./config/ios.config.ts", "androidBrowser": "wdio ./config/androidBrowser.config.ts", "iosBrowser": "wdio ./config/iosBrowser.config.ts", "lint": "eslint .", "pretest": "npm run clean-build", "test": "npm run app-test", "report": "allure generate ./allure-results" }, "keywords": [ "appium", "webdriverio", "typescript", "mobile automation", "behaviour driven development", "bdd", "selenium", "webdriverJS", "gherkin", "automation testing" ], "author": "[email protected]", "license": "ISC", "devDependencies": { "@types/chai": "^4.3.1", "@wdio/allure-reporter": "^7.19.5", "@wdio/appium-service": "^7.5.2", "@wdio/cli": "^7.5.2", "@wdio/local-runner": "^7.5.2", "@wdio/mocha-framework": "^7.19.5", "@wdio/spec-reporter": "^7.5.2", "@wdio/sync": "^7.5.2", "allure-commandline": "^2.17.2", "appium": "^1.22.3", "carthage": "^1.0.6", "chai": "^4.3.6", "dotenv": "^16.0.0", "eslint": "^7.32.0", "ios-deploy": "^1.11.4", "ios-simulator-set-location": "^1.0.0", "mochawesome": "^7.1.3", "mochawesome-report-generator": "^6.2.0", "ts-node": "^10.7.0", "tslint-to-eslint-config": "^2.12.3", "typescript": "^4.6.3", "wdio-cucumberjs-json-reporter": "^4.4.1", "wdio-spec-reporter": "^0.1.5", "webdriverio": "^7.19.5" }, "dependencies": { "@cucumber/cucumber": "^8.1.2", "@types/cucumber": "^7.0.0", "@wdio/cucumber-framework": "^7.19.5", "assert": "^2.0.0", "multiple-cucumber-html-reporter": "^1.20.0" } }

In my android emulator, chrome version is In my emulator, I have Chrome version: 91.0.4472.114

It will be very helpful, if someone could guide me as what I am missing here? Or reference of any project which cover similar type of scenario.

Thanks :)