赛普拉斯中的测试日期选择器

Question

所以我有这个组件，用户可以选择他们的 DOB。但我不知道如何刺激他们的行动。我想选择日历图标，然后选择 2000 年 5 月 1 日。有什么方法可以在赛普拉斯实现它？我在 Chrome 中也有 Testing Playground 扩展，但它不识别任何东西，除了 querySelector 之外唯一的东西 这是我的代码，组件是<DatePicker>：

import React from 'react'
import { withRouter } from 'react-router'
import Button from '@material-ui/core/Button';
import { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import DatePicker from 'react-date-picker';
import InputLabel from '@material-ui/core/InputLabel';

const FlatInfo = (props) => {
    //Pass the navigation from the parent
    const {navigation} = props;
    //Deconstruct the form details
    const {firstName, lastName} = props.formData;
    
    const [dob, setDOB] = useState(new Date());
    //Declare errors
    const [error, setError] = useState({});
    const [isInvalid, setInvalid] = useState({});

    const findError = () => {
      const errorFound = {};
      const invalid = {};

      if(!firstName.match(/^[a-zA-Z]+$/)){
        errorFound.firstName = "First name should contain letters only.";
        invalid.firstName = true;
      }

      if(!lastName.match(/^[a-zA-Z]+$/)){
        errorFound.lastName = "Last name should contain letters only.";
        invalid.lastName = true;
      }

      if(dob.getFullYear() < 1921){
        errorFound.dob = "Too old";
        invalid.dob = true;
      } else if (dob.getFullYear() > 2007){
        errorFound.dob = "This app is for 15+";
        invalid.dob = true;
      }
      
      return {errorFound, invalid};
    }

    const onSubmit = e => {
        e.preventDefault();
        //Check if all the inputs are valid
        const newError = findError();
        console.log(newError.errorFound);
        console.log(newError.invalid);

        //Proceed to the next step if inputs are valid
        if(Object.keys(newError.errorFound).length > 0){
          //Found errors and set the errors to the useState
          setError(newError.errorFound);
          setInvalid(newError.invalid);
          console.log(isInvalid);
        }else{
          navigation.next();
          //Update the user details
          props.updateUser({['firstName']:firstName});
          props.updateUser({['lastName']:lastName});
          props.updateUser({['dob']: dob});
        }
    }

    return (
        <form
        onSubmit={onSubmit}>
        <h6>First, tell us a little bit about you...</h6>

        <TextField className = "input"
            id="outlined-basic"
            variant="outlined"
            label="First Name"
            name="firstName"
            value={firstName}
            onChange={props.setForm}
            placeholder = "Enter your first name...."
            autoComplete="off"
            error = {isInvalid.firstName}
        /> 
        <br/>
        <br/>
        {error.firstName && <div className = "error-message">{error.firstName}</div>}
        <br/>

        <TextField className = "input"
            id="outlined-basic"
            variant="outlined"
            label="Last Name"
            name="lastName"
            value={lastName}
            onChange={props.setForm}
            placeholder = "Enter your last name...."
            autoComplete="off"
            error = {isInvalid.lastName}
        />
        <br />
        <br />
        {error.lastName && <div className = "error-message">{error.lastName}</div>}
        <br/>
        <InputLabel
            error = {isInvalid.dob}
        > D.O.B </InputLabel>
        <DatePicker
        label = "D.O.B"
        placeholder = "dob"
        onChange={setDOB}
        value={dob}
        dateFormat = "YYYY-MM-DDTHH:mm:ss.sssZ"
        />
        <br />
        {error.dob && <div className = "error-message">{error.dob}</div>}
        <br />

        <Button className = "button" 
         variant="contained"
        color = "secondary" 
        disabled = {!firstName || !lastName ?true:false}
        type="submit">Next</Button>
        <br />
        <Button className = "button" variant="contained"
        onClick = {() => props.history.push('/sign-up/')}>Back</Button>
        </form>
    )
}

 export default withRouter(FlatInfo);

这是我的元素的 HTML：

Answer 1

如果你想通过按钮来完成，这些类是赛普拉斯命令的不错选择器

cy.get('.react-date-picker__calendar-button').click()  // open
cy.get('.react-calendar__navigation__prev2-button').click() // -one year
cy.get('.react-calendar__navigation__prev-button')  // -four months
  .click()
  .click()
  .click()
  .click()
cy.get('.react-calendar__month-view__days__day') 
  .contains('1')  // works for this particular date, but watch for "31" in prior month
  .click()   

cy.get('.react-date-picker')  
  .find('input').eq(0)        // value stored in 1st input
  .invoke('val')
  .should('eq', '2020-05-01')

但您实际上并不需要测试所有 react-date-picker 操作。

而只是将所需的日期推入输入。

它是隐藏的，所以需要强制。

cy.get('.react-date-picker')
  .find('input').eq(0)
  .type('2020-05-01', {force:true})

cy.get('.react-date-picker')
  .find('input').eq(0)
  .invoke('val')
  .should('eq', '2020-05-01')

Answer 2

<DatePicker /> 应该接受文本，以便您可以定位 DatePicker 输入并键入日期，而不是在日历下拉列表中选择一个。

首先，给它一个id = 'datePicker。

然后： cy.get('input[id="datePicker"]').type('12/01/2021');