Cypress Нажмите на кнопку таблица / сетка

#html #cypress

#HTML #cypress

Вопрос:

У меня есть таблица, использующая DIVS, которые содержат данные о клиентах. Мне нужно нажать на кнопку удаления только одной кнопки nat=Delete , но строка имеет элементы с одинаковыми именами. Ниже приведен пример моей таблицы:

 <div class=`customer-table`>
    <div class=`row activemember`>
         <div class=`col-1`><a href=`#`>Holiday,John</a></div>
         <div class=`col-1`>8675309</div>
    </div>
    <div class=`row activemember`>
         <div class=`col-1`><a href=`#`>Doe,Jen</a></div>
         <div class=`col-1`>123524</div>
         <div class=`col-1`><button nat=`buttonDelete` type=`button` class=`btn btn-danger btn-xs` title=`Delete` tabindex=`-1`> <i class=`fa fa-remove`></i> </button></div>
    </div>
    <div class=`row activemember`>
         <div class=`col-1`><a href=`#`>Holiday,John</a></div>
         <div class=`col-1`>8675309</div>
         <div class=`col-1`><button nat=`buttonDelete` type=`button` class=`btn btn-danger btn-xs` title=`Delete` tabindex=`-1`> <i class=`fa fa-remove`></i> </button></div>
    </div>
</div>
 

по какой-то причине prev() не работает

Комментарии:

1. С какой именно проблемой вы столкнулись? Какую ошибку вызывает использование prev() throw? Что вам нужно проверить до / после нажатия кнопки?

2. Точно нажмите на кнопку строки, которая имеет желаемое значение в случае «Каникулы, Джон»,

3. я запускаю, но не нажимаю cy.get(‘@grid’) .внутри(($list) => { cy.screenshot(‘linhaGrid’) const $el = cy.find(«Праздник, Джон»), если ($el.длина> 0) { cy.wrap($el).first().click(); } })

4. В предоставленном вами коде есть несколько ошибок. Я напишу ответ на ваш вопрос в один момент.

Ответ №1:

Используя этот предоставленный код:

 cy.get('@grid') 
  .within(($list) => { 
    cy.screenshot('linhaGrid') 
    const $el = cy.find("Holiday, John") 
    if ($el.length > 0) { 
        cy.wrap($el).first().click(); 
    } 
  })
 
 // Translation of original
cy.get('@grid')
  .screenshot('linhaGrid')
  .contains('Holiday, John')
  .parents('.row')
  .find('button')
  .click();
 
  1. .find() не следует приковывать непосредственно к сай. [См. Документацию][1]
  2. .find() принимает селектор, а не текстовое значение. Чтобы найти элемент на основе текстового значения, используйте .contains()
  3. Вы не должны назначать переменные на основе возвращаемых значений cy. команд. Скорее всего, это будет вести себя не так, как вам хотелось бы.
  4. .contains() выдает только первый найденный элемент (даже если есть несколько совпадений) [1]: https://docs.cypress.io/api/commands/find#Syntax

Но, несмотря на все сказанное, код все равно не будет работать. Почему? Ваша первая строка не содержит кнопки. Чтобы добавить немного защиты, убедитесь, что вы выбираете только первую кнопку с предоставленным текстом…

 it('Tests something', () => {
...
  let clicked = false;
  cy.get('@grid')
    .screenshot('linhaGrid')
    .find('button')
    .each(($button) => {
      if (!clicked amp;amp; $button.parents('.row').contains('Holiday, John').length) {
        cy.wrap($button).click();
        clicked = true
      }
    })
})
 

Это должно сработать, потому что вы находите все экземпляры кнопки, а затем проверяете, есть ли у их родительских элементов (.row) дочерний элемент, содержащий указанный текст. Кроме того, при проверке clicked он будет нажимать только на первый найденный, так как после нажатия мы устанавливаем clicked значение true.