Поиск svg элементов на странице


(Александр) #1

У меня стоит задача проверка наличия svg элементов на странице. Беда в том что эти элементы на странице присутствуют, но Selenium не видит их. Наличие элементов я проверяю инспектором через chrome.

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

Использую библиотеку d3.js для посторения графа. Может дело в том что какое-то время граф не имеет стабильного неподвиного состояния? Вот пример разметки:

<div id="graph">
   <svg>
      <rect width="1855" height="994" class="pan"></rect>
      <g transform="translate(929.5,287) scale(0.9999999999999999)" class="main">
         <g class="paths">
         .......
         </g>
      </g>
   </svg>
</div>

Собственно в <g class="paths"> лежат необходимые мне теги path которые являются ветками графа. При попытке найти хотя бы <div id="graph"> через driver.find_element_by_id("graph") вылетает с искллючением "No such element".

Я в ступоре, может кто знает как разобраться с этой проблемой? Заранее Большое спасибо!


(Сергей Блохин) #2

А ты уверен, что данный div tag не находится внутри iframe, например?


(Mykhailo Poliarush) #3

а есть пример страницы посмотреть? и желательно сразу же приложить пример всего кода, чтобы можно было запустить


(Александр) #4

Да уверен, выше только есть еще один родительский div а дальше body


(Александр) #5

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


(Сергей Блохин) #6

Работать и не нужно без остальных частей. Нужен чистый HTML, который генерируется на выходе. Тот, с которым работает Selenium. Скопируй его из «Показать программный код страницы» (⌥⌘U). Кроме iFrame элемент может ещё и по-другому прятаться. Делаешь ли ты задержку после загрузки страницы и поиском элемента? В Ruby это делается через объект Selenium::WebDriver::Wait, например. В любом случае — нужно больше информации. Есть вариант попросить твоих разработчиков сделать автономную страницу-копию рабочей?


(sidelnikovmike) #7

Может html "битый"?


(Сергей Блохин) #8

Но тег <div id="graph"> открывается и закрывается. Уже не битый.


(Александр) #9

Да задержку делаю. Я пишу на питоне. Делаю через WebDriverWait(driver, 10).until()
Вот HTML страницы:

<link rel="stylesheet" type="text/css" href="js/app/widgets/d3graph/css/graph.css">

  <div id="graph" style="width: 1840px; height: 947px;">
    <svg>
      <rect width="1855" height="994" class="pan"></rect>
      <g transform="translate(1021.5,387) scale(1)" class="main">
        <g class="paths">
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L37.92588063954655,-79.96985650224545"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M37.92588063954655,-79.96985650224545L71.18156022076597,-138.143945867379"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L-64.51707548341734,-62.20718791961453"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-64.51707548341734,-62.20718791961453L-112.73348126688732,-108.39053463966627"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L-78.48190393866469,40.846938475822114"></path>
          <path class="pesron" hid="friend" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-78.48190393866469,40.846938475822114L-135.17127011324152,76.57622907806932"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L14.85192243160543,85.48372802496927"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M14.85192243160543,85.48372802496927L31.091981869925572,149.44641068540875"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L86.01156284453882,11.549681709300362"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M86.01156284453882,11.549681709300362L150.61194159365175,25.03333050320873"></path>
        </g>
        <g class="rel-labels">
          <g hid="friend" style="fill-opacity: 1;" transform="translate(37.92588063954655,-79.96985650224545)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(-64.51707548341734,-62.20718791961453)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">.......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">.......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(-78.48190393866469,40.846938475822114)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(14.85192243160543,85.48372802496927)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(86.01156284453882,11.549681709300362)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
        </g>
        <g class="node-groups">
          <g cx="-0.310721286966868" cy="-0.30076479872915174" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-0.310721286966868,-0.30076479872915174)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">.......</text>
              <text x="9" y=".45em" style="">.......</text>
            </g>
          </g>
          <g cx="71.14578789748941" cy="-138.07497379472073" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(71.14578789748941,-138.07497379472073)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">........</text>
              <text x="9" y=".45em" style="">........</text>
            </g>
          </g>
          <g cx="-112.67722871446026" cy="-108.33645016917389" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-112.67722871446026,-108.33645016917389)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-user"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">.........</text>
              <text x="9" y=".45em" style="">.........</text>
            </g>
          </g>
          <g cx="-135.10379044902987" cy="76.53776242657221" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-135.10379044902987,76.53776242657221)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">..........</text>
              <text x="9" y=".45em" style="">..........</text>
            </g>
          </g>
          <g cx="31.076269017777125" cy="149.37148225595877" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(31.076269017777125,149.37148225595877)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-user"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">...........</text>
              <text x="9" y=".45em" style="">...........</text>
            </g>
          </g>
          <g cx="150.53642499000637" cy="25.020654177485905" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(150.53642499000637,25.020654177485905)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">...........</text>
              <text x="9" y=".45em" style="">...........</text>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>

(sidelnikovmike) #10

Вы всё скопировали? Link не закрыт.

@TIT битым может быть не только тэг div


(Сергей Блохин) #11

Пока проблем нет. У меня всё работает. Но ты явно скопировал только кусок HTML, а не всю страницу.

require 'selenium-webdriver'

uri = 'data:text/html,<link rel="stylesheet" type="text/css" href="js/app/widgets/d3graph/css/graph.css">

  <div id="graph" style="width: 1840px; height: 947px;">
    <svg>
      <rect width="1855" height="994" class="pan"></rect>
      <g transform="translate(1021.5,387) scale(1)" class="main">
        <g class="paths">
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L37.92588063954655,-79.96985650224545"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M37.92588063954655,-79.96985650224545L71.18156022076597,-138.143945867379"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L-64.51707548341734,-62.20718791961453"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-64.51707548341734,-62.20718791961453L-112.73348126688732,-108.39053463966627"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L-78.48190393866469,40.846938475822114"></path>
          <path class="pesron" hid="friend" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-78.48190393866469,40.846938475822114L-135.17127011324152,76.57622907806932"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L14.85192243160543,85.48372802496927"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M14.85192243160543,85.48372802496927L31.091981869925572,149.44641068540875"></path>
          <path class="person" hid="frined" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M-0.3138622079531367,-0.30380507471886853L86.01156284453882,11.549681709300362"></path>
          <path class="person" hid="frined" marker-end="url(#in)" style="stroke-opacity: 1; stroke-width: 0.4px;" d="M86.01156284453882,11.549681709300362L150.61194159365175,25.03333050320873"></path>
        </g>
        <g class="rel-labels">
          <g hid="friend" style="fill-opacity: 1;" transform="translate(37.92588063954655,-79.96985650224545)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(-64.51707548341734,-62.20718791961453)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">.......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">.......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(-78.48190393866469,40.846938475822114)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(14.85192243160543,85.48372802496927)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
          <g hid="friend" style="fill-opacity: 1;" transform="translate(86.01156284453882,11.549681709300362)">
            <text x="0" y=".31em" text-anchor="middle" class="shadow edge-label">......</text>
            <text x="0" text-anchor="middle" class="edge-label" y=".31em">......</text>
          </g>
        </g>
        <g class="node-groups">
          <g cx="-0.310721286966868" cy="-0.30076479872915174" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-0.310721286966868,-0.30076479872915174)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">.......</text>
              <text x="9" y=".45em" style="">.......</text>
            </g>
          </g>
          <g cx="71.14578789748941" cy="-138.07497379472073" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(71.14578789748941,-138.07497379472073)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">........</text>
              <text x="9" y=".45em" style="">........</text>
            </g>
          </g>
          <g cx="-112.67722871446026" cy="-108.33645016917389" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-112.67722871446026,-108.33645016917389)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-user"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">.........</text>
              <text x="9" y=".45em" style="">.........</text>
            </g>
          </g>
          <g cx="-135.10379044902987" cy="76.53776242657221" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(-135.10379044902987,76.53776242657221)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">..........</text>
              <text x="9" y=".45em" style="">..........</text>
            </g>
          </g>
          <g cx="31.076269017777125" cy="149.37148225595877" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(31.076269017777125,149.37148225595877)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-user"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">...........</text>
              <text x="9" y=".45em" style="">...........</text>
            </g>
          </g>
          <g cx="150.53642499000637" cy="25.020654177485905" class="main-resp" hid="name" style="fill-opacity: 1;" transform="translate(150.53642499000637,25.020654177485905)">
            <foreignObject width="14" height="14" x="-7" y="-7">
              <i class="icon-question-sign"></i>
            </foreignObject>
            <g>
              <text x="9" y=".45em" class="shadow">...........</text>
              <text x="9" y=".45em" style="">...........</text>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>'

driver = Selenium::WebDriver.for :chrome
driver.get uri
element = driver.find_element :id, 'graph'

puts element.nil?

driver.close

(Сергей Блохин) #12

Тег Link не требует закрытия, т. к. является одиночным.
Достаточно того, чтобы конкретный div был закрыт.

require 'selenium-webdriver'

uri = 'data:text/html,<html><div id="foo">bar</div>'

driver = Selenium::WebDriver.for :chrome
driver.get uri
element = driver.find_element :id, 'foo'

# bar
puts element.text

driver.close

Заметь, что в моём примере тег html не закрыт, т. е. HTML является битым, но при этом Selenium отлично справился со своей задачей. DOM при этом не было разрушен.


(sidelnikovmike) #13

Ой))) прошу прощения)) про link и забыл совсем)) увлекся попытками найти причину проблемы))


(Александр) #14

Проблема еще в том что если смотреть сорс страницы, то этого дива там нету. У меня есть подозрения что он обновляется как-то динамически. Может он не добавляет его в DOM?


(sidelnikovmike) #15

Кстати да! Это же svg, а они чаще всего динамически добавляются. Посмотрите по коду , может где встречается инициализация этого элемента.


(sidelnikovmike) #16

Надо wait этого элемента попробовать тогда.


(Сергей Блохин) #17

Если ты его видишь в браузере — значит в DOM всё попало.
При каких обстоятельствах происходит событие создание SVG я не знаю, зависит от страницы.
Нужно её посмотреть, а пока это не получается сделать.
Selenium дожидается загрузки страницы и выполнения всех JS скриптов на ней, в том числе и AJAX.


(Сергей Блохин) #18

Есть возможность посмотреть на сам проект живьём?


(sidelnikovmike) #19

Ну или хотя бы посмотреть бы , где в коде js фигурирует этот id. А wait не помогает?


(Александр) #20

К сожалению не могу показать сам проект =( Но насчет DOM верно. Поговорю с разработчиками сего чуда. Wait пробовал, не помогает, просто вылетает по истечению времени. Спасибо за старания