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

Мой 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>

Уточните, пожалуйста, что вы ищете. Здесь нет XPath и быть не должно, поскольку это не XML. CSS можно использовать для выбора элементов для стилизации, а DOM API можно использовать в JavaScript для запроса элементов. Но неясно, что вы на самом деле хотите делать.

— 29.10.2018 22:30

@ScottMarcus Я хочу указать правильный локатор и элемент щелчка.

— 29.10.2018 22:31

Щелкните элемент который?

— 29.10.2018 22:33

@ScottMarcus этот элемент <div tabindex = "- 1" role = "gridcell" comp-id = "376" col-id = "0" class = "ag-cell ag-cell-not-inline-edit 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 ag-hidden "> </span> <span class = " ag-icon ag -icon-checkbox-unchecked "> </span> <span class = " ag-icon ag-icon-checkbox-indeterminate ag-hidden "> </span> </span> <span ref = " eCellValue "class = " значение-ячейки "> </span> </span> </div>

— 29.10.2018 22:35

@ScottMarcus это мой элемент css (by.css ('div.ag-body-container> div [row id = "0"]> div [col-id = "0"]')); он просто подсвечивался, не нажимал. Наверное мой css не указан

— 29.10.2018 22:37

@ScottMarcus Failed: документ не определен Stack: ReferenceError: документ не определен

— 29.10.2018 22:44

Убедитесь, что вы добавили этот код в элемент <script> непосредственно перед закрывающим тегом body. Код действительно работает, как вы можете видеть, запустив его здесь. document всегда существует на веб-странице. Если это не работает для вас, значит, что-то еще не так.

— 29.10.2018 22:45

javascript xpath checkbox automation protractor

29.10.2018 22:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

theDiv.addEventListener("click", function(){
  console.info("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>

29.10.2018 22:38

Ответ принят как подходящий

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();

Как правило, ответы намного полезнее, если они включают объяснение того, для чего предназначен код, и почему это решает проблему, не вводя других.

— 30.10.2018 04:22

Помогло.Спасибо.

— 30.10.2018 14:50

30.10.2018 04:01