如何使用React.js组件实现用于Web应用程序的Selenium webdriver

时间:2017-11-07 21:02:00

标签: html reactjs xpath selenium-webdriver automation

我正在使用Selenium自动化,我正在测试的应用程序基于react.js技术,它有很多动态内容。因此我从未找到任何元素的ID或名称。总是我必须搜索文本包含。它还有基于react.js的表,并且没有table,tr或td componet

即一个单元格的xpath:“// *

[@id='react']/div/div/span/span/span/div/div/div[2]/div[1]/div/div[1]/div/div/div/div[1]/div/div/div[1]". 

我总是找到类似xpath的按钮,选择下拉或任何元素。有没有人帮我解决这个react.js的实现?

很难找到动态元素并找到这些元素。 而且,获得复选框状态变得不可能; 勾选复选框时:

<span class="MuiButtonBase-root-203 MuiIconButton-root-270 MuiSwitchBase-root-295 MuiSwitchBase-default-297 MuiCheckbox-default-292 MuiSwitchBase-checked-298 MuiCheckbox-checked-293">
<span class="MuiIconButton-label-276">
<svg class="MuiSvgIcon-root-279" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<input class="MuiSwitchBase-input-296" value="on" type="checkbox">
</span>
<span class="MuiTouchRipple-root-205"></span>

未选中复选框时:

<span class="MuiButtonBase-root-203 MuiIconButton-root-270 MuiSwitchBase-root-295 MuiSwitchBase-default-297 MuiCheckbox-default-292">
<span class="MuiIconButton-label-276">
<svg class="MuiSvgIcon-root-279" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<input class="MuiSwitchBase-input-296" value="on" type="checkbox">
</span>
<span class="MuiTouchRipple-root-205"></span>

有人有想法吗?如何阅读复选框和整个表?

我有三个复选框(Text1,Text2和Text3)。 Lables Text1等基于以前的选择动态更改。现在我要检查复选框的状态并执行相应的操作

<span class="MuiButtonBase-root-461 MuiIconButton-root-528 MuiSwitchBase-root-553 MuiSwitchBase-default-555 MuiCheckbox-default-550">
<span class="MuiIconButton-label-534">
<svg class="MuiSvgIcon-root-537" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
<input class="MuiSwitchBase-input-554" value="on" type="checkbox"/>
</span>
<span class="MuiTouchRipple-root-463"/>
</span>
<p class="MuiTypography-root-1 MuiTypography-body1-10 MuiFormControlLabel-label-549">Text1</p>


<label class="MuiFormControlLabel-root-546 MuiFormControlLabel-hasLabel-548">
<span class="MuiButtonBase-root-461 MuiIconButton-root-528 MuiSwitchBase-root-553 MuiSwitchBase-default-555 MuiCheckbox-default-550">
<span class="MuiIconButton-label-534">
<svg class="MuiSvgIcon-root-537" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<input class="MuiSwitchBase-input-554" value="on" type="checkbox"/>
</span>
<span class="MuiTouchRipple-root-463"/>
</span>
<p class="MuiTypography-root-1 MuiTypography-body1-10 MuiFormControlLabel-label-549">Text2</p>


<span class="MuiButtonBase-root-461 MuiIconButton-root-528 MuiSwitchBase-root-553 MuiSwitchBase-default-555 MuiCheckbox-default-550">
<span class="MuiIconButton-label-534">
<svg class="MuiSvgIcon-root-537" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<input class="MuiSwitchBase-input-554" value="on" type="checkbox"/>
</span>
<span class="MuiTouchRipple-root-463"/>
</span>
<p class="MuiTypography-root-1 MuiTypography-body1-10 MuiFormControlLabel-label-549">Text3</p>

1 个答案:

答案 0 :(得分:0)

使用Xpath-contains而不是string-contains

  • 使用//tag[contains(@attr, 'string')]缩短xpath 例如//spans[contains(@class, 'MuiCheckbox-checked')]

代码解决方案(逐级)

  • 首先,选择高级元素
  • 然后,找到你的第二级元素(即按钮)