typescript - Wie erhält man Informationen über gerade geöffnete Tabs in Playwright?

Ich untersuche Playwright und versuche, den Titel eines Tabs zu wechseln oder zumindest zu bekommen, der geöffnet wurde. Aber die Liste der Seiten enthält den neu geöffneten Tab nicht. Mein Code ist ein Basistest aus der Dokumentation.

test('homepage has title and links to intro page navigation', async ({ browser }) => {
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto('https://playwright.dev/');

    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);

    // create a locator
    const getStarted = page.getByRole('link', { name: 'Get started' });
    const twitterLink = page.locator("//a[contains(@href, 'twitter')]");
    await twitterLink.click({ button: "middle" })
        
    const pages = context.pages();// Only one page is shown there.
    let firstPageName: string = await pages[0].title();
    let secondPageName: string = await pages[1].title();

Der Browser sieht so aus, nachdem man auf den Link geklickt hat

Ich habe Ansätze von hier (https://playwright.dev/docs/pages#handling-new-pages) ausprobiert, aber ich bin mir nicht sicher, ob sie für mich funktionieren. Ich verstehe einfach nicht wirklich, warum ich den neuen Tab in meinem Code nicht sehe.

Ich habe dieses Beispiel in den Dokumenten gesehen und versucht, es zu verwenden, aber es passiert nichts.

// Get all new pages (including popups) in the context
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
})

Also möchte ich verstehen, warum

context.pages()

gibt neu geöffnete Tabs nicht zurück.

Antwort #1

Schauen Sie sich ein funktionierendes/getestetes Beispiel an (klicken Sie auf den GitHub-Link auf der Hauptseite von Playwright):

test("verify link in new tab", async ({ page }) => {
  await page.goto("https://playwright.dev/");
  const newTabPromise = page.waitForEvent("popup");

  await page.getByRole("link", { name: "GitHub repository" }).click();
  const newTab = await newTabPromise;
  await newTab.waitForLoadState();

  await expect(newTab).toHaveURL("https://github.com/microsoft/playwright");
  await expect(newTab).toHaveTitle(
    "GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API."
  );
});

docs: https://playwright.dev/docs/pages#handling-popups

Antwort #2

Ich habe einige Änderungen an deinem Code vorgenommen. Wenn ich die Länge von Tabs ausdrucke, ist das Ergebnis 2, also wurde der neu geöffnete Tab erfasst. Das Problem kann gelöst werden, indem man wartet, bis die neue Seite geladen ist await tabs[1].waitForLoadState("load");. Ich hoffe, das hilft, und Vorschläge sind willkommen.

  test("homepage has title and links to intro page navigation", async ({
    browser,
  }) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto("https://playwright.dev/");
    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);
    // create a locator
    //const getStarted = page.getByRole("link", { name: "Get started" });
    const twitterLink = page.locator("//a[contains(@href, 'twitter')]");
    await twitterLink.click({ button: "middle" });
    const [pages] = await Promise.all([page.context().waitForEvent("page")]);
    const tabs = pages.context().pages();
    console.log(tabs.length);
    await tabs[1].waitForLoadState("load");
    console.log("first" + (await tabs[0].title()));
    console.log("second" + (await tabs[1].title()));
  });