Xamarin.UITest Query elements inside of a SFSafariViewController and ChromeCustomTabs

Question

We are currently implementing Open Id Connect in our Xamarin App. Therefore we also want to adjust the UI-Tests to do the login inside of a browser with Xamarin.UITest.

But when we try to query the username and password input fields with the c => c.CSS(".css-selector") selector like described here no results are returned. This is happening inside of ASWebAuthenticationSession on iOS and as well on ChromeCustomTabs on Android.

Here the code for selecting the elements:

            App.EnterText(c => c.Css("input[type=\"email\"]"), "username");
            App.EnterText(c => c.Css("input[type=\"password\"]"), "password");
            App.DismissKeyboard(); // On smaller screen the login button might be hidden below the keyboard otherwise
            App.Tap(c => c.Css("button[type=\"submit\"]"));

I also tried to use another selector like "div" or "body" but nothing is returned.

The error looks like this Unable to enter text. Query for Css("input[type="email"]") gave no results.

In the end is for iOS a SFSafariView rendered as here in the tree output.

[CalabashRootView > UIWindow]                                                                        
  [UITransitionView > UIDropShadowView]
    [UIView > UIScrollView]
      [UIView]
        [UIImageView] id: "login_logo.png"
        [UIView]
          [UIImageView] id: "loading_spinner.png"
      [_UIScrollViewScrollIndicator > UIView] label: "Vertical scroll bar, 1 page",  text: "0%" (center not on screen)
      [_UIScrollViewScrollIndicator > UIView] label: "Horizontal scroll bar, 1 page",  text: "0%" (center not on screen)
    [UIDimmingView]
  [UITransitionView]
    [UIDimmingView]
    [UIDropShadowView > ... > SFSafariView]
      [SFSafariLaunchPlaceholderView]
        [UINavigationBar]
          [_UIBarBackground]
            [_UIBarBackgroundShadowView > _UIBarBackgroundShadowContentImageView]
            [UIVisualEffectView > _UIVisualEffectBackdropView]
          [_UINavigationBarContentView]
        [UIToolbar > _UIBarBackground] id: "Toolbar"
          [_UIBarBackgroundShadowView > _UIBarBackgroundShadowContentImageView]
          [UIVisualEffectView > _UIVisualEffectBackdropView]
      [_UISizeTrackingView]
        [_UIRemoteView] id: "RemoteViewBridge"

Am I missing a step or is there another way to test those scenarios?

Answer 1

It's not possible to read out safe web views. These web views were created so that users could log in inside a safe environment to which the App itself has no access. So it's a good thing the queries do not work.

Either use a backdoor to inject an unsafe web view for the UI tests or use the Client Credentials flow if you need a token to communicate with your API. The production apps should use PKCE, though.