Блог

Цель

Чтобы заставить Cypress распознавать элемент DatePicker и управлять им.

Проблема

Я не могу заставить Cypress распознавать data-testid элемента DatePicker, и поэтому у меня нет возможности протестировать его E2E.

Ошибка

 Timed out retrying: Expected to find element: [data-testid="edit_dob"], but never found it.
  

Попытки

Я попытался поместить элемент DatePicker внутри элементов input и div в target вместо этого, но они терпят неудачу, как и ожидалось, по другим причинам.

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

Код

Приведенный ниже код работает так, как ожидалось, это просто Cypress, который, похоже, несовместим с вводом DatePicker.

   function displayEditDetails() {
    let listOfForms = [];
    for (const detail in details) {
        listOfForms.push(
          <FormGroup controlId={detail} key={`key_edit_${detail}`}>
            <FormLabel>{detail.charAt(0).toUpperCase()   detail.slice(1).replace('_', ' ')}</FormLabel>
            <FormControl
              data-testid={`edit_${detail}`}
              type={detail}
              value={details[detail] || ''}
              onChange={handleDetailsChange}
            />
          </FormGroup>
        )
    }
    listOfForms.push(
      <DatePicker
        data-testid={'edit_dob'}
        selected={dob}
        onChange={setDob}
        maxDate={new Date()}
      />
    );
    return(
      listOfForms
    )
  }
  

Тест

   it('Displays the edit fields', () => {
    cy.get('[data-testid="accountButton"]')
      .click();

    cy.get('[data-testid="editUserDetailsButton"]')
      .click();

    cy.get('[data-testid="user_email"]')
      .should('not.be.visible');

    cy.get('[data-testid="edit_full_name"]')
      .should('be.visible');

    cy.get('[data-testid="edit_dob"]')
      .should('be.visible');

    cy.get('[data-testid="edit_email"]')
      .should('be.visible')
      .should('have.value', 'test@editdetails.com');
  })
  

Как только я смогу настроить таргетинг на него, я планирую протестировать очистку текущего ввода и ввод новой даты. Приветствуется любая помощь, нацеленная на средство выбора, и предупреждения о дальнейших потенциальных ошибках.

Редактировать: вот сгенерированный HTML-код формы.

 <form>
  <div class="form-group">
    <label class="form-label" for="email">Email</label>
    <input data-testid="edit_email" type="email" id="email" class="form-control" value="admin@example.com" style="background-image: url(amp;quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0 qiwHELyi Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==amp;quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
  </div>

  <div class="form-group">
    <label class="form-label" for="full_name">Full name</label>
    <input data-testid="edit_full_name" type="full_name" id="full_name" class="form-control" value="Jareth">
  </div>

  <div class="form-group">
    <label class="form-label" for="address">Address</label>
    <input data-testid="edit_address" type="address" id="address" class="form-control" value="">
  </div>

  <div class="form-group">
    <label class="form-label" for="postcode">Postcode</label>
    <input data-testid="edit_postcode" type="postcode" id="postcode" class="form-control" value="">
  </div>

  <div data-testid="edit_dob">
    <div class="react-datepicker-wrapper">
      <div class="react-datepicker__input-container">
        <input type="text" class="" value="04/03/1999">
      </div>
    </div>
  </div>

  <button data-testid="confirmChangesButton" type="submit" class="LoaderButton  btn btn-primary btn-block">Confirm Changes</button></form>
  

Проблема видна при просмотре HTML-кода, созданного при запуске приложения.

DatePicker HTML

   <div data-testid="edit_dob">
    <div class="react-datepicker-wrapper">
      <div class="react-datepicker__input-container">
        <input type="text" class="" value="04/03/1999">
      </div>
    </div>
  </div>
  

DatePicker отображается как элемент ввода внутри нескольких divs, а идентификатор теста не предназначен для ввода.

Решение

API игровой площадки селектора для Cypress предлагает cy.get('.react-datepicker__input-container > input') класс родительского div ввода. С помощью этого я могу настроить таргетинг на DatePicker, очистить его и ввести новый ввод.

Примечания для следующего раза

1. Изучите HTML
2. Прочитайте документы более тщательно

Обратитесь к концепциям, используемым в cy.pickDateRange команде в приложении Cypress Real World. Это платежное приложение для демонстрации реального использования методов, шаблонов и рабочих процессов тестирования Cypress.

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