无法在iframe中选择元素 [英] Cannot select an element inside an iframe

问题描述

我正在尝试编写一个需要访问iframe中的元素的测试. (为一个有20个椅子的房间绘制图片，这些椅子中的每一个都是其自己的对象，我需要能够访问这些椅子).使用开发人员工具和元素查找器，它仅突出显示iframe，但不允许我访问.我对测试非常陌生，所以我很茫然.

I am trying to write a test that needs to access elements in an iframe. (Picture a drawing of a room with 20 chairs, each of these chairs is its own object, I need to be able to access these chairs). Using developer tools and the element finder it only highlights the iframe but does not allow me access. I'm very very new to testing so I am at a loss.

突出显示iframe时html中的元素是这样的:

The element in the html when highlighting the iframe is like this:

<iframe name="daasFrame" class="daas-surface" frameborder="0" width="100%" height="100%" ng-src="/Drawing/EventDiagram/e020c975-6f1f-4c6c-bf34-34fa7221c8f3/?venueId=&amp;seatingStyle=theater&amp;language=en&amp;units=Imperial&amp;theme=default&amp;shiftHeader=true"
src="/Drawing/EventDiagram/e020c975-6f1f-4c6c-bf34-34fa7221c8f3/?venueId=&amp;seatingStyle=theater&amp;language=en&amp;units=Imperial&amp;theme=default&amp;shiftHeader=true"></iframe>

我单靠测试就可以切换到，但是我不知道该如何交互.

I figured in the test alone I can do a switch to, however I have no idea what the elements would be called to interact.

推荐答案

有两种方法.首先使用chrome中的开发者工具(如果使用firefox，则firebug插件可以提供帮助).如果您打开开发人员工具，则始终可以访问整个html.

There are two ways of doing it. First using the developer tools in chrome (if use firefox then firebug plugin can help). If you open developer tools you can always access the whole html.

Open the webpage you want to test -> Click on the menu on the top right corner of chrome -> 
select more tools -> developer tools

您应该能够看到网页的完整html，包括iframe.现在，您可以转到iframe部分，然后在其中搜索body标记以查看已加载的元素.悬停在它们上面会为您提供元素.

You should be able to see complete html of your webpage including iframe. Now you can go to the iframe section and then search for body tag in that to see the elements loaded. Hovering on them will give you the elements.

第二种方法有些困难，您可以使用javascript代码获取html元素.方法如下-

Second way is a bit tough one where you can get the html elements using javascript code. Here's how -

browser.executeScript("return document.getElementsByTagName('iframe')[0].contentWindow.document.body.innerHTML;").then(function(html){
    console.log(html);
});

或使用量角器代码获取元素的内部HTML，但请等到iframe中的html加载后再使用:

or use protractor code to get inner Html of the element, but do wait until the html inside iframe loads before using it:

var ele = $('.daas-surface body'); //Make sure iframe element has body tag if not use some main element's tag within which you want to access the elements.
browser.wait(protractor.ExpectedConditions.presenceOf(ele), 20000)
.then(function(){
    ele.getInnerHtml().then(function(html){
        console.log(html);
    });
});

getElementsByTagName以数组的形式返回DOM中带有该标签的所有元素，如果您有多个iframe，则使用不同的值来获取不同的元素.上面的行将在iframe中打印完整的html，但是再次调试将使您感到痛苦.我建议第一种方法.希望这会有所帮助.

getElementsByTagName returns all the element with that tag in the DOM in the form of an array, if you have more than one iframe then use a different value to get different element. Above line will print the complete html inside the iframe but again debugging will be a pain for you. I would suggest the first way. Hope this helps.

这篇关于无法在iframe中选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！