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

У меня стоит задача проверка наличия 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”.

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

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

1 лайк

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

1 лайк

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

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

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

Может html “битый”?

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

Да задержку делаю. Я пишу на питоне. Делаю через 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>

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

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

Пока проблем нет. У меня всё работает. Но ты явно скопировал только кусок 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

Тег 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 при этом не было разрушен.

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

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

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

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

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

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

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

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