Как найти xpath к элементу изображения - PullRequest
0 голосов
/ 04 ноября 2019

У меня есть HTML-код ниже, который указывает на элемент SVG (изображение) на экране

<div _ngcontent-c25="" class="chart-div ng-star-inserted">
      <!---->
      <!----><div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
				<svg width="80" height="80">
					<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
						<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
						<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
						<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
						<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
					</g>
				</svg>
			<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;"><div class="attrLabel" style="font-weight: bold;">Germany</div><div class="attrCount">693</div><div class="attrPercent">51.4%</div></div></div>
      <!----><p _ngcontent-c25="" class="filtered-text ng-star-inserted">
        no value filtered
      </p>
      <!---->
      <!---->
      <!---->
    </div>

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

XPath: // div [@ class = 'pie-div ng-star-вставлен'] - это прекрасно работает до тех пор, пока div, но если я пытаюсь получить доступ к его дочернему элементу SVG и пути, он не находит его вообще (хотя кодотображается на экране)

Xpath, который я пробовал: // div [@ class = 'pie-div ng-star-вставлен'] / svg / g / path 1

элемент на экране будет выглядеть как на скриншоте ниже. enter image description here

Элемент на самом деле является изображением svg на экране (круговая диаграмма), когда мы наводим на него курсор, который отображает всплывающее окно с соответствующими данными местоположения

1 Ответ

1 голос
/ 04 ноября 2019

ваш xpath должен быть //div[@class='pie-div ng-star-inserted']/*[name()='svg']/*[name()='g']/*[name()='path'] - найден поиском xpath + svg

Существует другой синтаксис //div[@class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path - и с помощью аргумента NSresolver вы можете заставить его работать следующим образом

const xpath = "//div[@class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path";
let result = document.evaluate(
  xpath, 
  document, 
  prefix => prefix === 'svg' ? 'http://www.w3.org/2000/svg' : null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
  null
);

for (var i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i).getAttribute('fill'));
}
<div _ngcontent-c25="" class="chart-div ng-star-inserted">
  <div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
    <svg width="80" height="80">
      <g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
        <path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
        <path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
        <path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
        <path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
      </g>
    </svg>
    <div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;">
      <div class="attrLabel" style="font-weight: bold;">Germany</div>
      <div class="attrCount">693</div>
      <div class="attrPercent">51.4%</div>
    </div>
  </div>
  <p _ngcontent-c25="" class="filtered-text ng-star-inserted">
    no value filtered
  </p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...