在Playwright中检测React组件Props值：收货与账单地址同步测试

一、UI层面直接验证 #

这是E2E测试最直观的方式，模拟用户操作后直接检查账单地址的展示/输入框内容：

• 填充收货地址后，定位账单地址对应的元素，获取其值并断言与收货地址一致。

示例代码（基于Playwright）：

// 填充收货地址输入框
await checkout.verifyAddressInputField(page).fill('Grove street');

// 获取账单地址输入框的当前值
const billingAddress = await page.locator('[data-testid="billing-address-input"]').inputValue();

// 断言两个地址完全一致
expect(billingAddress).toBe('Grove street');

注：建议给账单地址元素加上data-testid，避免依赖DOM结构变动导致测试失败

二、检查组件Props中的data值 #

如果需要直接验证组件接收的data props里的shippingAddress和billingAddress，可以通过以下方式实现：

方法1：利用React内部API（Playwright示例） #

通过page.evaluate访问React组件实例的props，前提是React全局可访问：

await checkout.verifyAddressInputField(page).fill('Grove street');

// 获取Delivery组件的data props
const deliveryData = await page.evaluate(() => {
  const componentEl = document.querySelector('[data-testid="delivery-component"]');
  if (!componentEl) return null;
  
  // 访问React组件实例的props（注意：该API属于内部私有API，版本更新可能失效）
  const reactInstance = window.ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDOMComponentTree.getInstanceFromNode(componentEl);
  return reactInstance.props.data;
});

// 断言两个地址字段一致
expect(deliveryData?.shippingAddress).toBe('Grove street');
expect(deliveryData?.billingAddress).toBe('Grove street');

方法2：通过测试工具暴露组件状态 #

更稳妥的方式是在测试环境中给组件添加状态暴露逻辑：

1. 在Delivery组件中，测试环境下将data挂载到元素属性：

const Delivery: React.FC<DeliveryProps> = ({ data}) => {
  // 仅在测试环境下暴露props
  const testProps = process.env.NODE_ENV === 'test' ? { 'data-test-props': JSON.stringify(data) } : {};
  
  return (
    <div data-testid="delivery-component" {...testProps}>
      {/* 组件原有内容 */}
    </div>
  );
};

2. 在E2E测试中直接读取该属性：

await checkout.verifyAddressInputField(page).fill('Grove street');

// 获取组件上的测试props
const propsStr = await page.locator('[data-testid="delivery-component"]').getAttribute('data-test-props');
const deliveryData = propsStr ? JSON.parse(propsStr) : null;

// 断言地址一致
expect(deliveryData?.shippingAddress).toBe('Grove street');
expect(deliveryData?.billingAddress).toBe('Grove street');

内容的提问来源于stack exchange，提问作者Vedo