Day 22 来写一个简单e2e测试

今天我们来写一个简单的form来当作测试吧，首先我们刻出一个简单的画面

const App: FC = () => {
  const { handleChange, handleSubmit, values, errors } = useForm({
    initialValues: {
      account: '',
      password: '',
      rememberMe: false
    },
    validation: (values) => {
      const errors = {} as ErrorType;

      if (!values.account) {
        errors.account = '请输入帐号';
      }

      if (!values.password) {
        errors.password = '请输入密码';
      }

      return errors;
    },
    onSubmit: (values) => console.table(values)
  });

  return (
    <LoginWrapper>
      <input
        role="account"
        name="account"
        onChange={handleChange}
        value={values.account}
        placeholder="Account"
      />
      {errors?.account && <div style={{ color: 'red' }}>{errors.account}</div>}
      <input
        role="password"
        name="password"
        onChange={handleChange}
        value={values.password}
        placeholder="Password"
      />
      {errors?.password && (
        <div style={{ color: 'red' }}>{errors.password}</div>
      )}
      <label>
        <input
          type="checkbox"
          name="rememberMe"
          onChange={handleChange}
          value={String(values.rememberMe)}
          checked={values.rememberMe}
        />
        Remember Me
      </label>
      <button onClick={handleSubmit}>Login</button>
    </LoginWrapper>
  );
};

export default App;

里面的useForm各位可以自己揣摩看能怎样写，不是今天文章的重点，这个简单验证方式就是我们假如没有输入任何值就按下登入的按钮，会出现错误讯息．

那我们的测试案例要怎样写呢？

describe('check form component', () => {
  it('should show error msg', () => {
    cy.visit('/')
      .get('button')
      .click()
      .get('.css-3plbgl > :nth-child(2)')
      .should('have.text', '请输入帐号')
      .get('.css-3plbgl > :nth-child(4)')
      .should('have.text', '请输入密码');
  });
});

大家看get('里面很多css的hash')，这个怎麽取得，进测试页面时，按下左上那按钮 点选要验证的地方我们就可以取得css hash并把它丢到get里面去取得dom元素

跑完之後我们就会取得pass的讯息