calabash / calabash-ios-server

An embedded HTTP server for performing queries and test automation
Other
87 stars 82 forks source link

Cannot view elements inside iFrame using query #412

Open NahidSiddiqui opened 6 years ago

NahidSiddiqui commented 6 years ago

On my iOS app there is a screen for making payments using a credit or debit card and this is essentially a webview. When I run query("WKWebView css:'*'") I get only one iframe element for that screen.

screen shot 2018-02-09 at 15 43 31

What I get through query("WKWebView css:'*'") on calabash-ios console is as below:


 [169] {
             "center" => {
            "X" => 206.6875,
            "Y" => 525.8799877166748
        },
            "webView" => "<WKWebView: 0x7fd927031a00; frame = (0 0; 414 677); layer = <CALayer: 0x608000428a40>>",
           "nodeName" => "IFRAME",
                 "id" => "iframeNewCard",
        "textContent" => "",
        "iframe_info" => {
            "iframe_query_type" => 0,
                 "iframe_query" => "*"
        },
              "class" => "",
               "rect" => {
                   "x" => 22.6875,
              "height" => 677,
                   "y" => 85,
               "width" => 369,
                "left" => 22.6875,
                 "top" => 85,
            "center_y" => 525.88,
            "center_x" => 206.6875
        },
           "nodeType" => "ELEMENT_NODE"
    },
    [170] {
             "center" => {
            "X" => 0,
            "Y" => 102.8799877166748
        },
            "webView" => "<WKWebView: 0x7fd927031a00; frame = (0 0; 414 677); layer = <CALayer: 0x608000428a40>>",
           "nodeName" => "DIV",
                 "id" => "",
        "textContent" => " ",
              "class" => "",
               "rect" => {
                   "x" => 0,
              "height" => 0,
                   "y" => 0,
               "width" => 0,
                "left" => 0,
                 "top" => 0,
            "center_y" => 102.88,
            "center_x" => 0
        },
           "nodeType" => "ELEMENT_NODE"
    },
    [171] {
             "center" => {
            "X" => 0,
            "Y" => 102.8799877166748
        },
            "webView" => "<WKWebView: 0x7fd927031a00; frame = (0 0; 414 677); layer = <CALayer: 0x608000428a40>>",
           "nodeName" => "INPUT",
                 "id" => "",
        "textContent" => "",
              "class" => "",
               "rect" => {
                   "x" => 0,
              "height" => 0,
                   "y" => 0,
               "width" => 0,
                "left" => 0,
                 "top" => 0,
            "center_y" => 102.88,
            "center_x" => 0
        },
           "nodeType" => "ELEMENT_NODE"
    },
    [172] {
------------------------------------------------------------------

However as you can see from the image there is more elements on that screen apart from this but there is no information to identify them.

What I have tried:

I tried using some java script as below:

iframe_id = 'iframeNewCard' element_id = 'card_number' js = "document.getElementById('#{iframe_id}').contentDocument.getElementById('#{element_id}').click()" query("WKWebView", {calabashStringByEvaluatingJavaScript: js})

But this throws an exception which I am assuming is due to the fact that I cannot see any elements using query

jmoody commented 6 years ago

Please use "```" in the future for code.

Try using the iframe selector.

Here are examples.

https://github.com/calabash/ios-webview-test-app/blob/master/CalWebViewApp/features/steps/iframe_steps.rb

NahidSiddiqui commented 6 years ago

Hi, Just to update you on this. I have utilised you examples at [https://github.com/calabash/ios-webview-test-app] and tried query("WKWebView css:'iframe' css:'input#card_number'") for the element I found with id: card_number and node: input to no avail. I also tried query("WKWebView css:'iframe' css:'*'") but this doesn't return anything either. I used the tools on chrome to view the full web version on iPhone to view the elements since I cannot view them on calabash-iso console.

screen shot 2018-02-12 at 11 11 18

jmoody commented 6 years ago

We have seen problems with cross-site credit card payment pages.

If the css:'iframe' solution does not work, then you will have to skip the tests or try to update the web query engine in the LPServer (this project) to support your test.