你好，我是e2e测试的新手，我想测试的一件事是，当我更改送货地址时，我也想将其设置为账单地址。例如，如果我在输入字段中将格罗夫Street设置为我的送货地址，我也希望它与账单地址相同。有没有方法让我检查账单地址以及送货地址
下面是我的组件：
const Delivery: React.FC<DeliveryProps> = ({ data})这些数据的模型是这样的
data = {
...some other data
shippingAddress:string;
billingAddress:string;}最后，我想做的是像这样填写地址字段：
await checkout.verifyAddressInputField(page).fill('Grove street');检查我的整个组件的props值，也就是数据props，主要是shippingAddress和billingAddress
任何帮助都会很好，提前感谢：D
1条答案
按热度按时间2uluyalo1#
不要检查props！E2 E测试不应该知道或关心网站甚至使用React。测试的想法是像用户一样与应用程序交互（与网页交互），而不是像程序员那样（与组件props交互）。
一个典型的剧作家测试看起来像这样：
这些步骤都不涉及任何与React-it's an implementation detail相关的内容。理论上，我们应该能够用vanilla JS，Angular或Vue替换React，并且我们的测试将继续工作。
与实现细节紧密相关的测试通常会以令人惊讶的方式中断，并且无法从用户的Angular 提供我们的应用程序一定运行良好的信心。
即使在对React组件进行单元测试时，也不需要在props上Assert。Enzyme是React 16中流行的单元测试库，它促进了测试实现细节，但它已经被React测试库所取代，后者纯粹通过其接口与组件交互。RTL允许您提供props，因为它通常用于单元测试能力，但对于Playwright，E2 E流程中涉及到组件，但我们不像在单元测试中那样专门测试任何一个组件。
此外，Playwright希望您避免其他实现细节，如CSS选择器，因为它们不是面向用户的。
进一步阅读：
至于你的具体用例，当你在表单中输入时，并不完全清楚应该发生什么用户可见的行为。但是如果你可以提交表单并看到一个确认页面，那么这就是一个测试。如果你可以输入一些无效信息，那么提交表单并看到一条错误消息，如果在表单中输入触发了一些验证消息，比如“密码必须至少8个字符”，那就是一个测试。
在E2 E测试中，有一件事可能太细粒度而不需要麻烦测试，那就是填写表单是否会在受控组件的输入中呈现文本。我们可以推断，如果表单在应该提交的时候成功提交，而在无效时被拒绝，则组件的内部工作就像预期的那样。
如果你想测试该组件的细粒度输入掩码和验证，我可能会在React测试库的单元测试套件中进行测试。E2 E测试很慢，并且更多地是关于整体应用程序的行为，而不是覆盖表单输入的每一个角落。