使用 Cypress 在 Blazor 输入字段中键入文本不起作用答案

【问题标题】：Typing text in Blazor input fields with Cypress doesn't work使用 Cypress 在 Blazor 输入字段中键入文本不起作用
【发布时间】：2020-03-26 20:55:00
【问题描述】：

我有一个使用 Blazor 构建的简单 Web 表单，我正在尝试使用 Cypress 对其进行测试。当我尝试在文本字段中键入文本时，首先正确输入了文本，但大约一秒钟后它从屏幕上消失了。同样，如果我从下拉列表中选择一个值，正确的值会在屏幕上闪烁然后消失。测试通过，控制台中没有错误或警告。

如果我自己在浏览器中输入文本或进行其他一些更改，一切正常。我自己也可以在赛普拉斯浏览器中正确输入文本。该问题仅在赛普拉斯运行测试时出现。

这是我在 .razor 文件中的表单的简化版本，可以重现问题。 TempTableMapping 是一个简单的对象，我用它来绑定值。

<EditForm Context="formContext" Model="tempTableMapping">
    <div class="modal-body">

        <div class="form-label-and-field">
            <label for="MappingName">Mapping name: </label>
            <InputText id="MappingName" class="form-control" @bind-Value="tempTableMapping.MappingName"></InputText>
        </div>
    </div>
</EditForm>

我使用的 Cypress 代码：

describe('My Test', function () {

    it('Type mapping name', function () {
        cy.visit('https://localhost:44374/mapping')
        cy.get('#MappingName').type("mapping_name")
    })
})

我认为该问题可能与 Blazor 在后台执行的一些 Javascript 操作有关，但我对 Blazor 的了解不够深入，无法进一步调试它。

我已阅读这篇文章 (https://remibou.github.io/Test-a-Blazor-App-with-Cypress/)，因此应该可以将 Cypress 与 Blazor 一起使用。我还尝试了文章中提到的 polyfill-fix，但它对此没有帮助，并且可能与此问题无关。我还注意到以下问题（https://github.com/cypress-io/cypress/issues/4635），可能与此问题有关。

我使用的是赛普拉斯 3.7.0 版。

【问题讨论】：

你试过@bind-Value="@tempTableMapping.MappingName" 吗？
我现在试过了，但没有任何作用。这两种方法似乎都有效，并将值正确绑定到对象。
在您的 C# 代码中是否设置了 tempTableMapping.MappingName ？
在我的@code 块的开头，我已经像这样初始化了对象：TableMappingList tempTableMapping = new TableMappingList(); MappingName 是一个字符串字段，没有其他特定的C#与之相关。当我自己在浏览器中使用它时它也运行良好，只有在赛普拉斯使用它时才会出现问题。

标签： razor cypress blazor

【解决方案1】：

作为一种解决方法，我注意到 Selenium Webdriver 设法正确使用 Blazor 输入字段

【讨论】：