CODEWITHSUNDEEP
reactjscypress
user14695970
user14695970

Reputation:

Cypress doesn't type date

I have a problem where cypress doesn't type date in another part of my application. It does type on the first part but failing to do so on the second part, even if the code is same.

This is my cypress test:

it.only("Inputing expiry date", () => {
  Cypress.on("uncaught:exception", (err, runnable) => {
    return false;
  });
  cy.get("[data-cy=input-expiry]")
    .type("20/01/2022", { force: true })
    .click({ force: true })
    .type("{enter}", { force: true })
    .trigger("input");
});

This is my react Component:

   <input {...props}
          className={this.getInputClass()}
          placeholder={this.props.placeholder}
          onChange={(event)=>this.onChange(event)}
          ref="myRef"
          onKeyPress={(event) => this.handleKeyPress(event)}
          onBlur={() => {
            this.setState({blur:true},this.checkValid(this.state.value));
          }}
          readOnly
          data-cy={this.props.cydatepicker}
        />

This is how I use my component:

<DatePicker
  className="expiryDBAS"
  defaultDate={
    this.state.input.expiry
      ? moment(this.state.input.expiry)
      : defaultYear
  }
  setDefaultDate={!!this.state.input.expiry}
  value={
    this.state.input.expiryDB
      ? this.buildDateValue(this.state.input.expiryDB)
      : ""
  }
  selected={this.state.input.expiryDB}
  onChange={(value) => this.updateInputDate("expiryDB", value)}
  peekNextMonth
  showMonthDropdown
  showYearDropdown
  dropdownMode="select"
  placeholder="Expiry Date"
  minDate={moment()}
  validation={[required]}
  cydatepicker="input-expiry"
/>;

UPDATE:

I tried to use this code but it still doesn't allow me to set the value of input field.

  .then(elem => {
    elem.val("20/01/2022")})

Upvotes: 0

Views: 951

Answers (1)

user14695970
user14695970

Reputation:

I've got the solution which is this:

  it.only("Selecting expiry date", () => {
      cy.get("[data-cy=input-expiry]")
      .then(elem => {
        elem.val(expiryDate);
      })
      .trigger('change')
      .type("{esc}", {
        force: true,
       });
  });

Upvotes: 2

Related Questions