如何使用Codeceptjs对基于Adyen实现的Google Pay流程进行E2E测试？

该需求完全可以落地，可按照以下步骤操作：

1. 处理Google Pay弹出窗口/iframe切换 #

CodeceptJS集成Puppeteer的场景下，针对Adyen唤起的Google Pay容器，分两种情况处理上下文切换：

• 若为独立弹出窗口：点击Google Pay单选按钮后监听弹窗事件，获取句柄后切换上下文即可，示例代码：

// 点击Google Pay选项后立即监听弹窗
const gPayPopup = await I.waitForPopup('https://pay.google.com', 10);
// 切换到Google Pay弹窗上下文
await I.switchTo(gPayPopup);

• 若为页面内嵌跨域iframe：等待iframe加载完成后直接切换即可，示例代码：

// 等待Google Pay iframe加载完成，通过src匹配定位
I.waitForElement('iframe[src*="pay.google.com"]', 10);
I.switchTo('iframe[src*="pay.google.com"]');

2. 账号与测试卡预配置 #

无需每次执行用例时手动输入谷歌账号信息，通过预配置浏览器用户配置即可跳过登录环节：

• 在codecept.conf.js的Puppeteer配置项中，加载预先登录了测试谷歌账号的本地Chrome配置文件，同时放行弹窗拦截，示例配置：

exports.config = {
  helpers: {
    Puppeteer: {
      url: "你的测试站点地址",
      show: true,
      windowSize: "1920x1080",
      args: [
        "--user-data-dir=/本地测试Chrome配置文件存储路径",
        "--disable-popup-blocking",
        "--disable-web-security"
      ]
    }
  }
}

• 提前在该测试谷歌账号的Google Wallet中添加Google官方提供的测试卡，Adyen的测试环境会自动识别这类测试卡，不会触发真实扣款。

3. 支付操作示例 #

切换到Google Pay上下文后，即可正常定位元素完成支付操作：

// 等待支付方式列表加载完成
I.waitForElement('[data-testid="payment-method-selector"]', 10);
// 选中预设的测试卡
I.click('Visa ••1111'); // 替换为你的测试卡显示文本
// 点击确认支付
I.click('继续');
// 操作完成后切回原站点上下文
I.switchTo();
// 后续补充支付结果校验逻辑即可

Apple Pay同类测试说明 #

Apple Pay的测试逻辑类似，仅需注意两点：

• 仅能在Safari浏览器环境下执行测试，用WebDriver驱动Safari即可
• 提前在测试Apple ID中添加官方测试卡，处理Safari的Apple Pay弹窗切换即可

内容的提问来源于stack exchange，提问作者JOSE IGNACIO HERNANDEZ GRACIA