Блог

У меня есть страница с несколькими панелями результатов, на каждой панели есть своя кнопка удаления, как только пользователь нажимает кнопку удаления, появляется режим подтверждения с вопросом, хочет ли он удалить эту запись.

Я написал тест Cypress для проверки процесса удаления, тест работает как ожидалось, появляется модальное сообщение, если пользователь подтверждает удаление, панель удаляется.

В ходе теста я убеждаюсь, что правильная панель была удалена, проверяя, не существует ли ее id на странице больше.

 const deleteResult = action => {
  cy.get('div[data-test="Results"]').should('be.visible');
  let contactID;
  cy.get('div[data-test="Results"]')
    .first()
    .within(() => {
      cy.get('p[data-test="Contact ID"]').then($match => {
        contactID= $match.html();
        cy.get('button[data-test="Delete Contact"]')
          .click()
          .get('div[data-test="Delete Record Modal"]')
          .should('be.visible')
          .get(`button[data-test="${action}"]`)
          .click();
      });
    });
  cy.get('p[data-test="Contact ID"]').each($match => {
    cy.wait(2000);
    if (action === 'Confirm Deletion') {
      cy.wrap($match)
        .invoke('text')
        .should('not.eq', contactID);
    } else {
      cy.wrap($match)
        .invoke('text')
        .should('eq', contactID);
    });
};
  

Теперь я пытаюсь написать тест другого варианта — пользователя, который отменяет удаление, мне нужно проверить, contactID существует ли данная запись на странице, как я могу этого добиться?

Приведенный выше код неверен, он ожидает, что у всей панели будет заданное значение contactID .

Редактировать:

 const deleteResult = action => {
  cy.get('div[data-test="Results"]').should('be.visible');
  let contactID;
  cy.get('div[data-test="Results"]')
    .first()
    .within(() => {
      cy.get('p[data-test="Contact ID"]').then($match => {
        contactID= $match.text();
        cy.get('button[data-test="Delete Contact"]')
          .click()
          .get('div[data-test="Delete Record Modal"]')
          .should('be.visible')
          .get(`button[data-test="${action}"]`)
          .click();
      });
    });
  cy.wait(2000);
  const els = cy.get('p[data-test="Contact ID"]');
  if (action === 'Confirm Deletion') {
    els.each($match => {
      cy.wrap($match)
        .invoke('text')
        .should('not.eq', contactID); //contactID is the actual ids
    });
  } else {
    els.should('contain', contactID); //contactID is undefined
  }
};
  

Вы можете переместить if перед своей cy.get , чтобы ваша логика больше не была вложена внутрь .each

 const els = cy.get(...)
if (something) {
  cy.then(() => els.should('not.contain', contactID))
} else {
  els.each(...)
}