[Cypress] Test React’s Controlled Input with Cypress Selector Playground

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Cypress] Test React’s Controlled Input with Cypress Selector Playground相关的知识,希望对你有一定的参考价值。

React based applications often use controlled inputs, meaning the input event leads to the application code setting the value of the very input we’re typing into. Since this moves the input setting behavior into the application code, we should have a test to guard against future changes that might break this behavior. In this lesson, we’ll use the Selector Playground feature in Cypress and create a test that enters text into an input and asserts that the value is the same as the entered text.

 

The get the selected element, we can use the cypress interface:

 

    it.only(\'should type new todo into the input field\', function () {
        const typedText = \'New todo\';
        cy.visit(\'/\');
        cy.get(\'.new-todo\')
            .type(typedText)
            .should(\'have.value\', typedText);
    });

 

以上是关于[Cypress] Test React’s Controlled Input with Cypress Selector Playground的主要内容,如果未能解决你的问题,请参考以下文章

使用 `react-testing-library` 和 `cypress` 有啥区别?

[Cypress] Test XHR Failure Conditions with Cypress

使用 cypress 选择 react-select 下拉列表选项

使用 Cypress 和 React-testing-library 设置 CircleCI

将 React 添加到工作区失败,EACCES:权限被拒绝,mkdir '/home/mint/.cache/Cypress'

[Cypress] Create True end-to-end Tests with Cypress (Smoke test)