Watir을 사용하여 Shadow DOM에 액세스하여 상호 작용하는 방법은 무엇입니까?

Question

이 페이지 chrome : // downloads /에 액세스하여 파일이 다운로드되었지만 섀도우 DOM인지 확인해야합니다.

이 기사에서는 Selenium Webdriver를 사용하여 DOM 요소에 액세스하는 방법을 설명했습니다.

execute_script("return $('<#file-link>')") 

    execute_script("return $('<:contains(test-file.mp3)>')") 

: http://jeremysklarsky.github.io/blog/2015/06/13/accessing-shadow-dom-elements-with-selenium-webdriver/

그러나이 JS

driver.executeScript("return $('body /deep/ <#yourSelector>')") 
 

 
driver.executeScript("return $('body /deep/ ._mm_column')[0].textContent").then(function(title){ 
 
    title.should.contain(segmentName); 
 
});

로 작성은 Watir과 구문에, 내 코드 작동하지만 원하는 결과 나 반환하지 않음을 변경 데

저는 콘솔에서 nils를 사용하고 있습니다.

enter image description here

는하지만 내가 좀하고 싶습니다하는 요소가 있는지 확인하는 것입니다.

Answer 1

titusfortner의 삭제 된 답변에서 언급했듯이 Selenium Easy에는 관련 기사 "Working with Shadow DOM Elements using Webdriver"이 있습니다. JavaScript를 통해 그림자 요소를 가져온 다음 정상적으로 자손 요소와 상호 작용할 수 있다는 것이 밝혀졌습니다.

그러나 Watir이 작성된 방식으로 인해, 나는 원숭이 패치 Watir::Browser을 작동시켜야했습니다. 나는 좀 더 영구적 인 수정을 얻을 수 있는지,하지만 지금, 여기에 작업 예제가 있습니다 : execute_script의 인수 당신이 실행하는 브라우저를 요구하는 등, 자바 스크립트가 될 것입니다로 주어진

require 'watir' 

# Monkey-patch due to being unable to check the tag name of the shadow root 
class Watir::Browser 
    def wrap_element(scope, element) 
    Watir.element_class_for(element.tag_name.downcase).new(scope, element: element) 
    rescue Selenium::WebDriver::Error::UnknownError # need a better rescue 
    Watir::Element.new(scope, element: element) 
    end 
end 

def expand_root_element(element, browser) 
    browser.execute_script("return arguments[0].shadowRoot", element) 
end 

browser = Watir::Browser.new 

# Create a download item 
browser.goto('https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zip') 
browser.goto('chrome://downloads') 

# Navigate the shadow DOM to the download items 
download_manager = browser.element(css: 'downloads-manager') 
shadow_download_manager = expand_root_element(download_manager, browser) 

download_items = shadow_download_manager.elements(css: '#downloads-list downloads-item') 
shadow_download_items = download_items.map { |s| expand_root_element(s, browser) } 

# Find a specific download item by file name 
expected_file = /chromedriver_win32/ 
download = shadow_download_items.find { |s| s.span(id: 'name').text_content =~ expected_file } 

# Do something with the download - eg wait for the download to complete 
download.link(id: 'show').wait_until_present