如何处理Playwright中的弹出窗口？

Question

我想删除一篇文章，在普通网站上我通常单击“删除”按钮，然后我会看到弹出窗口，我必须在其中确认我的选择。

所以，这是我的代码

const {test, expect} = require('@playwright/test');
const { createNewArticle, generateRandomUser, generateRandomArticle } = require('../../helpers');

test.only('should delete an article after clicking on [Delete Article]', async ({page}) => {
  const user = generateRandomUser();
  const article = generateRandomArticle();

  const r = await createNewArticle(user, article);

  const slug = r.data.article.slug;

  const {email, password} = user;

  await page.goto('https://conduit.mate.academy/user/login');

  // await page.pause();

  await page.getByPlaceholder('Email').fill(email);
  await page.getByPlaceholder('Password').fill(password);
  await page.getByRole('button', { name: 'Sign in' }).click();

  await page.waitForURL('https://conduit.mate.academy/')

  await page.goto(`https://conduit.mate.academy/article/${slug}`);

  await page.locator('.btn.btn-outline-danger.btn-sm').first().click();

  await page.goto(`https://conduit.mate.academy/profile/${user.username}`);

  await expect(page.locator('.article-preview')).toHaveCount(1);
  await expect(page.locator('.article-preview')).toHaveText('No articles are here... yet.');
})

这是失败的原因错误 因此，在该网站上，如果没有文章，则会显示此标题。这里还没有文章。”但由于某种原因，它发现了应该删除的文章。

当我查看跟踪时，我看到了这个跟踪 因此，它找到了点击它的元素，但它只是没有被删除。

我认为这可能是因为弹出窗口，当我在网站上时，我应该通过弹出窗口确认我要删除该文章，但是当我在 Playwright 中时，我没有看到它，我读到了 Playwright默认情况下不处理它们，所以我尝试从使用弹出窗口的基本操作开始，并添加了这行代码

const popup = await page.waitForEvent('popup');

之后我收到了这个错误错误 那么，有人可以指出这可能是什么原因吗？

我只想到弹出窗口，所以我查阅了文档、chatGPT、youtube 视频，并尝试使用一些像这样的代码

const popup = await page.waitForEvent('popup');

await popup.waitForFunction(() => {
  const buttons = document.querySelectorAll('button');
  for (const button of buttons) {
    if (button.innerText === 'OK') {
      button.click();
      return true;
    }
  }
  return false;
});

但是无论如何它只是超时了，因为它正在等待这个弹出窗口并且没有出现。

Answer 1

在单击删除之前不要等待 waitForEvent，这样在按下删除按钮之前您的代码将不会继续执行。我用一种方法修改了您的代码，用 page.on('dialog') 来解决它，而不是弹出：

const { test, expect } = require('@playwright/test');
const { createNewArticle, generateRandomUser, generateRandomArticle } = require('../../helpers');

test.only('should delete an article after clicking on [Delete Article]', async ({ page }) => {
    const user = generateRandomUser();
    const article = generateRandomArticle();

    const r = await createNewArticle(user, article);

    const slug = r.data.article.slug;

    const { email, password } = user;

    await page.goto('https://conduit.mate.academy/user/login');

    await page.getByPlaceholder('Email').fill(email);
    await page.getByPlaceholder('Password').fill(password);
    await page.getByRole('button', { name: 'Sign in' }).click();

    await page.waitForURL('https://conduit.mate.academy/')
    
    await page.goto(`https://conduit.mate.academy/article/${slug}`);
    
    // 1. Initiate event listener
    page.on('dialog', async dialog => {
        // 3. Do stuff with the dialog here (reject/accept etc.)
        console.log(dialog.message());
        await dialog.accept()
    });
    // 2. Press the delete button
    await page.locator('.btn.btn-outline-danger.btn-sm').first().click();

    // 4. Execution continues:
    await page.goto(`https://conduit.mate.academy/profile/${user.username}`);

    await expect(page.locator('.article-preview')).toHaveCount(1);
    await expect(page.locator('.article-preview')).toHaveText('No articles are here... yet.');
})

Answer 2

简短的回答是

page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});

文档：https://playwright.dev/docs/api/class-dialog