Нахождение веб-элементов на веб-странице Polymer с помощью объектов ShadowDom - PullRequest
Новая
       25

Нахождение веб-элементов на веб-странице Polymer с помощью объектов ShadowDom

0 голосов
/ 12 февраля 2019

Я автоматизирую веб-страницу с помощью Selenium Webdriver и Java, меня поразила веб-страница Polymer, в которой есть элементы shadowRoot в Html.Я не могу достичь необходимых элементов.

enter image description here

Мне нужно получить доступ к элементу с id = "Contain" и id = "callButton", я попытался использовать примеры в Интернетечто дало мне представление о доступе, но я не могу добраться до элемента.Могу ли я понять, как это автоматизировать с помощью селена, это то, что мне нужно понять.

Когда я пытаюсь получить исходный код страницы динамически, тогда как автоматические элементы ниже теневого корня недоступны.

Снимок выше, пока я проверяю элемент.Динамически, если я беру источник страницы, я получаю HTML ниже.В этом я не получаю никакого элемента после первого теневого корня 

   '  <!DOCTYPE html>
     <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta http-equiv="Cache-Control" content="no-cache">
      <meta http-equiv="Cache-Control" content="no-store">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width,initial- 
      scale=1,minimum-scale=0.5,maximum-scale=3,user-scalable=yes">
      <base href="/">
       <title>Title</title>
      <!--logo Favicon - http://www.favicon-generator.org/--> 
      <link rel="shortcut icon" type="image/x-icon" 
      href="./assets/img/favicon/favicon.ico"> 
      <link rel="apple-touch-icon" sizes="57x57" 
      href="./assets/img/favicon/apple-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" 
      href="./assets/img/favicon/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" 
      href="./assets/img/favicon/apple-icon-72x72.png">
     <link rel="apple-touch-icon" sizes="76x76" 
      href="./assets/img/favicon/apple-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" 
       href="./assets/img/favicon/apple-icon-114x114.png">
       <link rel="apple-touch-icon" sizes="120x120" 
       href="./assets/img/favicon/apple-icon-120x120.png">
       <link rel="apple-touch-icon" sizes="144x144" 
       href="./assets/img/favicon/apple-icon-144x144.png">
       <link rel="apple-touch-icon" sizes="152x152" 
       href="./assets/img/favicon/apple-icon-152x152.png">
       <link rel="apple-touch-icon" sizes="180x180" 
       href="./assets/img/favicon/apple-icon-180x180.png">
       <link rel="icon" type="image/png" sizes="192x192" 
       href="./assets/img/favicon/android-icon-192x192.png">
       <link rel="icon" type="image/png" sizes="32x32" 
        href="./assets/img/favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" 
        href="./assets/img/favicon/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" 
         href="./assets/img/favicon/favicon-16x16.png">
        <link rel="manifest" href="./assets/img/favicon/manifest.json"> 
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" 
         content="./assets/img/favicon/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">
         <!--End of Favicon section--><!-- Web Fonts -->
         <link href="https://fonts.googleapis.com/css? 
           family=Roboto&subset=latin,latin-ext" rel="stylesheet" 
          type="text/css">
         <link href="styles.6818abb062a6ae399f29.bundle.css" 
         rel="stylesheet"/>
         </head>
         <body>
         <app-login>
         <!--Inline style for loading screen--><style>body, html {
        height: 100%;
        background: #FAFAFA;
    }

    @keyframes spinner {
        to {transform: rotate(360deg);}
    }

    .spinner:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        border-radius: 50%;
        border: 1px solid #CDCDCD;
        border-top-color: #0277BD;
        animation: spinner .6s linear infinite;
    }

    .app-loading {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
       }
       </style>
       <div class="app-loading">
       <div class="spinner">
       </div>
       </div>
       </app-login>
       <script type="text/javascript" 
       src="inline.318b50c57b4eba3d437b.bundle.js"></script>
       <script type="text/javascript" 
       src="polyfills.9a4f082a49343f8da8e1.bundle.js"></script>
       <script type="text/javascript" 
       src="scripts.ccb2e44daa4fd4db3422.bundle.js"></script>
       <script type="text/javascript" 
       src="main.aacb992b6c008772ed3d.bundle.js"></script>
       </body>
       </html>`

1 Ответ

0 голосов
/ 21 февраля 2019

Я использовал комбинацию Java-скрипта и XPath для получения:

  1. Первый элемент перед корнем тени по тэгу // Здесь я использую getElementsByTagname для получения тэга, который получает всеэлементы под тегом, который находится непосредственно перед вторым теневым корнем.
  2. 'WebElement ironPages = (WebElement) jse.executeScript ("return arguments [0] .shadowRoot.getElementsByTagName (' iron-pages ') [0] ", edgeCallControl);'
  3. Как только я получу вышеупомянутое, я могу получить доступ к каждому элементу по "id" каждого элемента согласно HTml

Получить кнопку кнопки, где кнопкаэто идентификатор.`WebElement button = (WebElement) jse.executeScript (" return arguments [0] .shadowRoot.querySelector ('# Button') ", edgeManualDial); '

это идеи, которые я получил от" Shadowподдержка селена"

...