2

Я пытаюсь написать тест, которому необходимо получить доступ к элементам в iframe. (Нарисуйте рисунок комнаты с 20 стульями, каждый из этих стульев - это собственный объект, мне нужно иметь доступ к этим стульям). Используя инструменты разработчика и элементный элемент, он выделяет только iframe, но не позволяет мне получить доступ. Я очень новичок в тестировании, поэтому я в недоумении.Невозможно выбрать элемент внутри iframe

элемент в HTML, когда подсветка IFRAME как это:

<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>

Я понял, в тесте я один могу сделать переключатель в положение, однако я не имею ни малейшего представления о элементы будут вызваны для взаимодействия.

+0

Посмотрите на http://stackoverflow.com/questions/16103407/get-html-inside-iframe-using-jquery –

+0

Вы имеете в виду вы хотите получить элементы внутри iframe, используя код транспортира? или вы хотите получить к ним доступ с помощью инструментов разработчика, чтобы вы могли кодировать эти элементы? –

+0

Я использую обратный способ ... В iframe вы можете получить доступ к функциям на вызывающем объекте, используя parent.anyFunction() ... и затем, в iframe init, я вызываю что-то вроде parent.getConfig(), и я делаю необходимые действия , –

ответ

2

Есть два способа сделать это. Сначала используйте инструменты разработчика в chrome (если использовать firefox, то плагин firebug может помочь). Если вы открываете инструменты для разработчиков, вы всегда можете получить доступ ко всему 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, чтобы увидеть загруженные элементы. Наведение на них даст вам элементы.

Второй способ немного жесткий, где вы можете получить элементы html, используя код javascript. Вот как -

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

или используйте код транспортир, чтобы получить внутренний Html элемента, но не делать ждать, пока HTML внутри IFrame нагрузок перед использованием:

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, тогда используйте другое значение для получения другого элемента. Над строкой будет напечатан полный html внутри iframe, но снова отладка будет для вас болью. Я бы предложил первый путь. Надеюсь это поможет.

+0

Я получаю сообщение об ошибке: Ошибка: неизвестная ошибка: Не удается прочитать свойство 'contentWindow' из null –

+0

Мне интересно, если это не в том же домене –

+0

@NicolePhillips Извините, что это была моя ошибка. Используйте свой идентификатор элемента в выполняемой функции javascript. Я обновил его, чтобы получить элементы по именам тегов html. Вы также можете сделать это с помощью класса и т. Д. –

2

Попытка выполнить скрипт, чтобы получить нужную информацию, вероятно, не самый лучший подход здесь. Если вы используете транспортир или селен, вы можете использовать switchTo, чтобы изменить контекст ваших селеновых команд на нужные вам кадры.

browser.switchTo().frame($('[name=daasFrame]')) 

$('#element-inside-frame').getText().then(function (text) { 
console.log(text) 
}); 

// switch back to the "parent page" context 
browser.switchTo().defaultContent() 

Если все, что вы хотите это содержание HTML от фрейма, это должно быть достаточно:

$('[name=daasFrame]').getText().then(function (text) { 
    console.log(text) 
}) 
3

Во время работы на моей автоматизации Test Suite Я побежал в экземпляр был мне нужно принять меры за пределами iFrame и убедитесь, что соответствующие изменения произошли внутри iFrame. Чтобы облегчить это переключение между кадрами, я настраиваю 2 функции в своих Объектах страницы, один для перехода в iFrame, а другой - для возврата в главное окно.


Для перехода в плавающем фрейме я использовал это:

browser.switchTo().frame(0); 

Чтобы вернуться в главное окно, я использовал это:

browser.switchTo().defaultContent(); 

После ввода был внутри iFrame Мне не нужно было ничего делать особенно если это страница AngularJS. Все запросы element(by.___()) ссылаются на iFrame и поиск изнутри. Если это стандартный веб-сайт, вы захотите использовать развернутый синтаксис Selenium в своих тестах (http://ng-learn.org/2014/02/Protractor_Testing_With_Angular_And_Non_Angular_Sites/).


Вы также можете попробовать это, чтобы перейти к конкретному кадру:

browser.switchTo().frame(element(by.className('daas-surface'))); 
2

Поскольку iframe это рассматривать как новое окно. Прежде всего, нужно переключиться на iframe. Самое простое решение

browser.switchTo().frame(element(by.tagName('iframe' )).getWebElement());

или же можно использовать className, чтобы получить элемент вместо tagName. Затем можно получить любые элементы в пределах iframe.

после этого в случае необходимости вернуться к родительскому фрейму

browser.driver.switchToParentFrame();

Смежные вопросы