Как создать xpath для извлечения из div и класса

Question

Для элемента ниже я не могу создать xpath, так как он содержит только div и class. Также Как создать динамические c xpaths для этого вида сценария ios.

Html is

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

Проблема в том, что она должна быть динамической c, поэтому в качестве флажка можно выбрать такие значения, как 2Fa, Bridge et c.

Я ценю вашу помощь.

Answer 1

Автоматизируйте веб-страницу так, как она разработана. Я бы посоветовал вам использовать стратегию css locator здесь.

Согласно приведенному выше фрагменту 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

указатель флажка: input [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.

Answer 2

Я не знаю Java по голове, но вот некоторый код псевдо:

var found = false;
var search = "2FA";
var usecases = driver.findElements(By.Class("campaign-usecase-item"); // returns 6 divs
foreach(var case in usecases) { // loop all divs
  var label = case.findElement(By.Class("MuiGrid-grid-xs-6")); // find labels
  if (label.text == search ) { // if label found
    found = true;
    case.findElement(By.TagName("input")).click(); // find first input within case div and click
    break; //breaks for out of foreach loop
  }
}
if(!found) throw exception("label {search} not found");

Ключевое обучение здесь, что вы можете искать в найденных элементах. Я часто этим пользуюсь. Это делает сложные xpath очень удобочитаемыми.

Answer 3

Вы можете попробовать это:

string sectionName = "2FA";   
driver.findElement(By.xpath(String.format("//div[contains(@class, 'campaign-usecase-item')]/div[contains(@text, '%s')]/preceding-sibling::div/span[contains(@class, 'MuiCheckbox-root')]//input", sectionName)));

И вы можете установить название нужного раздела

Answer 4

Лучшая практика - не использовать xpath для даже модульного тестирования. добавление data-test = "answer-1" или лучшего значения semanti c для data-test может помочь вам даже в улучшении поддержки вашего теста. другие локаторы чаще всего ломают ваши тесты