时间戳

首页 > 解决方案 > Jest Puppeteer - 如何在模态中选择第二次出现的类？

css - Jest Puppeteer - 如何在模态中选择第二次出现的类？

问题描述

我目前正在用 jest-puppeteer 编写一些自动化测试。我遇到了一种情况，即 DOM 上出现了两个具有相同类的元素。我试图让 Puppeteer 点击第二次出现，但它一直点击第一个元素！

为了清楚起见，这是我的工作流程的细分。
1. 主页有一个带有 class 的元素.action-button。
2. 单击打开模式的不同按钮。
3. Modal 有另一个带有 class 的按钮.action-button。
4.我无法让Puppeteer点击.action-button模态中的第二个！

这是我的代码片段。

    await page.waitForSelector('.open-modal');

    await page.waitForSelector('.action-button');

    await page.click('.action-button)';

如何让 Puppeteer 单击第二个.action-button？

编辑 - 解决方案 我发誓我之前试过这个，但我一定是脑子里放了个屁。

解决方案是一个简单的 CSS 选择器，它具有唯一的父属性值和我正在寻找的类。

    await page.waitForSelector('.open-modal');

    await page.waitForSelector('[unique-attr] .action-button');

    await page.click('[unique-attr] .action-button)';

标签： cssdomjestjsautomated-testspuppeteer

解决方案

在 Vuejs 中，我们通常这样做 findAll('class-name).at(index) 索引从 0 开始等等。所以对于第二次出现，我们会像这样 findAll('class-name').at(1)

推荐阅读