如何为用React.js组件开发的web应用程序实现Selenium web驱动程序

Question

我正在从事硒自动化的工作，我正在测试的应用程序是基于react.js技术的，它有很多动态内容。因此，我永远找不到任何元素的ID或名称。我总是要搜索包含文本的内容。此外，它还具有基于react.js的表，并且没有表、tr或td组件。

一个单元格的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等是根据以前的selection..Now动态更改的，因此，我要检查复选框的状态，然后执行适当的操作

<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>

Answer 1

使用Xpath-contains而不是string-contains

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

代码解决方案(逐级)

• 首先，选择高级元素。
• 然后，找到您的二级元素(即Button)。