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

转载于 2018-05-24 21:23:00 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/9085171.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Cypress测试工具验证React应用中受控输入框的行为。通过选择器Playground特性，创建测试用例来确保输入框的值正确设置为用户输入的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
    });

转载于:https://www.cnblogs.com/Answer1215/p/9085171.html