NodeJS 如何使用Playwright打开新选项卡(例如,单击按钮在新选项卡中打开新部分)

ojsjcaue  于 2022-12-03  发布在  Node.js
关注(0)|答案(4)|浏览(761)

我正在寻找一个更简单的解决方案,以目前的情况。例如,你打开谷歌(任何其他网站),你想通过点击按钮(ex. Gmail)-打开这个页面在新的标签页使用剧作家。

let browser, page, context;
describe('Check the main page view', function () {
    before(async () => {
        for (const browserType of ['chromium']) {
            browser = await playwright[browserType].launch({headless: false});
            context = await browser.newContext();
            page = await context.newPage();
            await page.goto(baseUrl);
        }
    });
    after(async function () {
        browser.close();
    });
    
        await page.click(tax);
        const taxPage = await page.getAttribute(taxAccount, 'href');

        const [newPage] = await Promise.all([
        context.waitForEvent('page'),
        page.evaluate((taxPage) => window.open(taxPage, '_blank'), taxPage)]);

        await newPage.waitForLoadState();
        console.log(await newPage.title());
brccelvz

brccelvz1#

要在使用Playwright单击按钮时打开一个新标签页,可以使用evaluatewaitForEvent函数在页面上下文中执行JavaScript,并等待创建新页面。下面是一个示例,说明如何执行此操作:

const buttonSelector = "#gmail";
const eventToWaitFor = "page";
    
await page.click(buttonSelector);
    
const [newPage] = await Promise.all([
    context.waitForEvent(eventToWaitFor),
    page.evaluate(() => window.open("https://gmail.com", "_blank"))
]);
    
await newPage.waitForLoadState();
console.log(await newPage.title());

在这里,它单击带有选择器#gmail的按钮,然后使用evaluate函数执行JavaScript,打开一个URL为https://gmail.com的新选项卡,然后代码使用waitForEvent函数等待page事件被触发,表示已经创建了一个新页面。新页面存储在一个变量中,这段代码使用title函数打印新页面的标题。这段代码应该在单击按钮时打开一个新选项卡,并打印在新选项卡中打开的页面的标题。

uxhixvfz

uxhixvfz2#

it('Open a new tab', async function () {
     await page.click(button, { button: "middle" });
     await page.waitForTimeout(2000); //waitForNavigation and waitForLoadState do not work in this case
     let pages = await context.pages();
     expect(await pages[1].title()).equal('Title');
7gs2gvoe

7gs2gvoe3#

你可以将一个modifier传递给click函数,在macos中它是Meta,因为你会用cmd+click打开一个新的标签页,在windows中它是Control

const browser = await playwright["chromium"].launch({headless : false});
const page = await browser.newPage();
await page.goto('https://www.facebook.com/');
var pagePromise = page.context().waitForEvent('page', p => p.url() =='https://www.messenger.com/');
await page.click('text=Messenger', { modifiers: ['Meta']});
const newPage = await pagePromise;
await newPage.bringToFront();
await browser.close();
n8ghc7c1

n8ghc7c14#

在我的情况下,我点击一个弹出窗口中的链接,如(*ctrl +点击链接 *),然后它打开一个新的选项卡,并在该新选项卡上工作

await page.click('#open')
const [newTab] = await Promise.all([
    page.waitForEvent('popup'),
    await page.keyboard.down('Control'),
    await page.frameLocator('//iframe[@title="New tab."]').locator('a').click(), // in popup
    await page.keyboard.up('Control'),
    console.log("clicked on link")
]);
await newTab.waitForFunction(()=>document.title === 'new tab title')
await newTab.fill('#firstname')
await newTab.close() // close the current tab
await page.click('#exitbutton') //back to parent tab and work on it
....
....
await page.close() // close the parent tab

相关问题