Как правильно написать XPath или CSS?

Question

Мой HTML-код:

  <div tabindex="-1" role="gridcell" comp-id="376" col-id="0" class="ag-cell ag-cell-not-inline-editing ag-cell-with-height ag-cell-focus ag-cell-range-selected ag-cell-range-selected-1" style="width: 77px; left: 0px;">
    <span ref="eCellWrapper" class="ag-cell-wrapper">
      <span class="ag-selection-checkbox">
        <span class="ag-icon ag-icon-checkbox-checked"></span>
        <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
        <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
      </span>
      <span ref="eCellValue" class="ag-cell-value"></span>
    </span>
  </div>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span>
    <span ref="eCellValue" class="ag-cell-value"></span>
  </span>
  <span class="ag-icon ag-icon-checkbox-checked"></span>
  <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
  <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  <span class="ag-selection-checkbox">
    <span class="ag-icon ag-icon-checkbox-checked"></span>
    <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
    <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  </span>
  <span ref="eCellValue" class="ag-cell-value"></span>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span><span ref="eCellValue" class="ag-cell-value"></span>
  </span>

Как написать правильный идентификатор для щелчка флажка. У меня есть строка с информацией, у этой строки есть флажок Мне нужно нажать на этот флажок.

Это мой XPath?

var checkbox= element(by.css('div.ag-body-container>div[row id="0"]>div[col-id="0"]'));
browser.wait(ExpectedConditions.elementToBeClickable(checkbox), 5000);
checkbox.click();

Это пройдено, но оно не щелкнуло правой кнопкой мыши. Оно просто выделено целой строкой.

Мой HTML:

  <div tabindex="-1" role="gridcell" comp-id="376" col-id="0" class="ag-cell ag-cell-not-inline-editing ag-cell-with-height ag-cell-focus ag-cell-range-selected ag-cell-range-selected-1" style="width: 77px; left: 0px;"><span ref="eCellWrapper" class="ag-cell-wrapper"><span class="ag-selection-checkbox"><span class="ag-icon ag-icon-checkbox-checked"></span><span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span><span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span></span><span ref="eCellValue" class="ag-cell-value"></span></span></div>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span>
    <span ref="eCellValue" class="ag-cell-value"></span>
  </span>
  <span class="ag-icon ag-icon-checkbox-checked"></span>

  <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
  <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  <span class="ag-selection-checkbox">
    <span class="ag-icon ag-icon-checkbox-checked"></span>
    <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
    <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  </span>
  <span ref="eCellValue" class="ag-cell-value"></span>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span>
    <span ref="eCellValue" class="ag-cell-value"></span>
  </span>

Answer 1

var css_locator = 'div.ag-body-container > div[row-id="0"] > div[col-id="0"] .ag-selection-checkbox :not(.ag-hidden)';

var checkbox= element(by.css(css_locator));
browser.wait(ExpectedConditions.elementToBeClickable(checkbox), 5000);
checkbox.click();

Answer 2

Вы можете просто использовать document.querySelector(), который изолирует элемент по некоторому уникальному коэффициенту. Я предполагаю, что значение comp-id является уникальным. Но вы должны знать, что comp-id является недопустимым атрибутом.

let theDiv = document.querySelector("div[comp-id='376']");

theDiv.addEventListener("click", function(){
  console.log("element clicked!");
});

theDiv.click();

  <div tabindex="-1" role="gridcell" comp-id="376" col-id="0" class="ag-cell ag-cell-not-inline-editing ag-cell-with-height ag-cell-focus ag-cell-range-selected ag-cell-range-selected-1" style="width: 77px; left: 0px;"><span ref="eCellWrapper" class="ag-cell-wrapper"><span class="ag-selection-checkbox"><span class="ag-icon ag-icon-checkbox-checked"></span><span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span><span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span></span><span ref="eCellValue" class="ag-cell-value"></span></span></div>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span>
    <span ref="eCellValue" class="ag-cell-value"></span>
  </span>
  <span class="ag-icon ag-icon-checkbox-checked"></span>

  <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
  <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  <span class="ag-selection-checkbox">
    <span class="ag-icon ag-icon-checkbox-checked"></span>
    <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
    <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
  </span>
  <span ref="eCellValue" class="ag-cell-value"></span>
  <span ref="eCellWrapper" class="ag-cell-wrapper">
    <span class="ag-selection-checkbox">
      <span class="ag-icon ag-icon-checkbox-checked"></span>
      <span class="ag-icon ag-icon-checkbox-unchecked ag-hidden"></span>
      <span class="ag-icon ag-icon-checkbox-indeterminate ag-hidden"></span>
    </span>
    <span ref="eCellValue" class="ag-cell-value"></span>
  </span>