_setting_values.media_stream_camera: 1 and using --use-fake-ui-for-media-stream, but the popup still occasionally appears.
Element Not Found — The selfie button uses dynamic styling (position: absolute, background: red, border-radius: 10px) with no stable ID or class name. XPath like //*[@id='root']/div/div[3]/div/div[1] works inconsistently.
Confirm/Save Button — After the photo is taken, a confirmation button appears but Katalon sometimes fails to detect it, possibly due to render timing.
I have not worked in this test scenario, but I am eager to know the solution. May be @qurzunta.kaab or @depapp be helpful.
But I guess Chrome camera permission is a browser‑level popup, so the reliable solution will be to start Chrome with pre‑granted permissions to avoid popup blocking
set the Chrome capabilities in Project Settings > Desired Capabilities > Web UI > Chrome rather than passing them at runtime. You need both the argument and the preference together. In Desired Capabilities, add:
// Under chromePreferences
profile.default_content_setting_values.media_stream_camera = 1
profile.default_content_setting_values.notifications = 1
profile.content_settings.exceptions.media_stream_camera.'*.per_host' = [setting: 1]
// Under args
--use-fake-ui-for-media-stream
--use-fake-device-for-media-stream
the content_settings.exceptions entry is what actually pre-grants the permission per origin so the popup never fires. The profile.default_content_setting_values alone is not always sufficient in newer Chrome versions.
for the unstable React locators, stop relying on generated XPath indices. Use a relative strategy targeting nearby stable elements or text content. Something like //div[contains(text(), 'Capture')]/ancestor::button or //button[contains(@class, 'selfie')] will survive re-renders better than //*[@id='root']/div/div[3]/div/div[1]. You can also ask your devs to add data-testid attributes to those elements, which is standard practice for React testing.
for the confirm button timing, wrap the wait in a WebUI.waitForElementClickable() instead of just visible, and increase the retry. If it still flakes, add a small WebUI.delay(1) before the wait as the canvas/stream can take a moment to swap out.
Hi! I’m also pretty new to Katalon and ran into something similar
Just wanted to ask, are you running this on localhost or HTTPS? I’ve seen that Chrome can behave differently with camera permissions on non-secure origins.
To stabilize your selfie flow in Katalon, apply these three targeted fixes:
1. Kill the Camera Popup (Desired Capabilities)
Don’t handle the popup with code; prevent it from appearing at the browser level. Go to Project > Settings > Desired Capabilities > Web > Chrome and add these arguments:
--use-fake-ui-for-media-stream (Auto-grants camera permission)
--use-fake-device-for-media-stream (Replaces the camera feed with a test pattern)
2. Fix the “Element Not Found” (Better XPaths)
Stop using absolute paths (the ones with div/div/div). Use Relative XPaths that look for text or partial attributes which are less likely to change than the layout.
Instead of://*[@id='root']/div/div[3]/div/div[1]Use these logic patterns:
By Text://button[contains(., 'Capture')]
By Icon/Class://button[contains(@class, 'camera')]
By Proximity://label[text()='Take a Selfie']/following-sibling::button
3. Handle Rendering Delays (Enhanced Wait)
React apps often “flicker” the button into existence. Use a Retry Logic combined with a wait:
Groovy
// Wait for the button to be clickable, not just present
WebUI.waitForElementClickable(findTestObject('Your_Confirm_Button'), 10)
// If standard click fails, use JavaScript to force the click
try {
WebUI.click(findTestObject('Your_Confirm_Button'))
} catch (Exception e) {
WebUI.executeJavaScript("arguments[0].click();", Arrays.asList(WebUI.findWebElement(findTestObject('Your_Confirm_Button'))))
}
High-Level Advice: The ultimate solution for dynamic React apps is asking your developers to add a data-test-id attribute to buttons. It takes them 5 seconds and makes your automation 100% stable.
