java - 如何为 div 和类创建的结账创建 xpath

Question

对于下面的元素，我无法创建 xpath，因为它只包含 div 和类。还有如何为这种场景创建动态 xpath。

HTML 是

<div class="MuiGrid-root campaign-usecase-item MuiGrid-item MuiGrid-grid-xs-12">
 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-5" style="display: flex; align-items: center;">
    <span class="MuiButtonBase-root MuiIconButton-root jss739 MuiCheckbox-root MuiCheckbox-colorSecondary payment-check-box MuiIconButton-colorSecondary" aria-disabled="false">
      <span class="MuiIconButton-label">
        <input class="jss742" type="checkbox" data-indeterminate="false" value=""> 
        <span class="material-icons MuiIcon-root jss732" aria-hidden="true">
        <img class="jss731" src="/static/media/unchecked.70d37fef.svg"></span> 
      </span>
     <span class="MuiTouchRipple-root"></span>
   </span><h3>STANDARD</h3>
 </div>
 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6">2FA</div>
 <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1">$ 60.-</div>
</div>

问题是，它应该是动态的，以便根据 2Fa、Bridge 等值可以选择作为复选框。

感谢您的帮助。

Answer 1

按照网页的设计方式实现网页自动化。我在这里建议您使用 css 定位器 startegy。

根据上面的 html 代码片段，它看起来像网格，将项目显示为网格行。

首先确定网格总行数，即

[class*="MuiGrid-root campaign-usecase-item"], the above locator describe the each grid cell

一旦您能够识别所有网格行，就会移动以识别所需的行索引

locator : [class*="MuiGrid-root MuiGrid-item"]:not([style]) will give you the 
name (like 2fa) and price of each section

复选框定位器:输入[type='checkbox']

List<WebElement> gridRows = driver.findElements(By.cssLocator("[class*='MuiGrid- 
root campaign-usecase-item']"));
int totalGridCells = gridRows.size;
int reuiredGridRowIndex;
for(int i=0' i<totalGridCells; : i++){
    if(gridRows.get(i).findElements(By.cssLocator("[class*='MuiGrid-root MuiGrid- 
    item']:not([style])").get(0).getText().equals("2FA")){
    // 2fa value will be dynamic and pass as function argument
    reuiredGridRowIndex = i;
    break;
     }
}

//现在根据索引，您可以单击或获取所提供行的任何单元格值的价格

//点击复选框

driver.findElements(By.cssLocator("[class*='MuiGrid-root campaign-usecase- 
    item']")).get(reuiredGridRowIndex 
      ).findElement(By.cssLocator("input[type='checkbox']")).click()

//获取价格

driver.findElements(By.cssLocator("[class*='MuiGrid-root campaign-usecase- 
    item']")).get(reuiredGridRowIndex ).findElements(By.cssLocator(" 
        [class*="MuiGrid-root MuiGrid-item"]:not([style])")).get(1).getText()

是的，代码行数更多，但与 xpath 策略相比，上面的代码更灵活、可扩展和稳定。您可能需要更改定位器值，因为我没有完整的页面 html。