playwright#BrowserContext TypeScript Examples

export function setupPlaywrightCtx(): PlaywrightTestCtx {
    let browser: Browser;
    let context: BrowserContext;

    const testCtx: PlaywrightTestCtx = {};

    beforeAll(async () => {
        browser = await chromium.launch({
            headless: true,
            devtools: false,
            args: ['--no-sandbox'],
        });
        context = await browser.newContext();
    });

    afterAll(async () => {
        await browser.close();
    });

    beforeEach(async () => {
        // Setup new page (tab)
        testCtx.page = await context.newPage();
        await testCtx.page.goto(`http://localhost:${PORT}`);
        testCtx.mockiavelli = await Mockiavelli.setup(testCtx.page);
        testCtx.makeRequest = makeRequestFactory(testCtx.page);
    });

    afterEach(async () => {
        await testCtx.page.close();
    });

    return testCtx;
}

describe(`Browser: ${browserType.name()} without Metamask`, () => {
  let page: Page
  let browser: Browser
  let context: BrowserContext

  const resetBrowserContext = async () => {
    if (page) await page.close()
    if (context) await context.close()
    if (browser) await browser.close()

    browser = await browserType.launch({ headless, slowMo })
    context = await browser.newContext()
    page = await context.newPage()
    addPageDiagnostics(page)
  }

  before(resetBrowserContext)
  after(() => browser?.close())

  describe('Balance', () => {
    it('Reads the ETH2 staking contract', async () => {
      await page.goto(`${baseUrl}balance`)

      await waitForExpect(async () => {
        expect(await page.isVisible(XPath.text('span', 'ETH2 staking contract holds:'))).to.be.true
      })
    })
  })
})

waitForPopup = async (context: BrowserContext): Promise<Page> => {
  const pages = context.pages().length
  return new Promise((res) => {
    const intervalId = setInterval(() => {
      if (context.pages().length > pages) {
        clearInterval(intervalId)
        res(context.pages()[context.pages().length - 1])
      }
    }, 500)
  })
}

fixtures.contextFactory.init(async ({ browser, contextOptions, testInfo, screenshotOnFailure }, run) => {
  const contexts: BrowserContext[] = [];
  async function contextFactory(options: BrowserContextOptions = {}) {
    const context = await browser.newContext({ ...contextOptions, ...options });
    contexts.push(context);
    return context;
  }
  await run(contextFactory);

  if (screenshotOnFailure && (testInfo.status !== testInfo.expectedStatus)) {
    let ordinal = 0;
    for (const context of contexts) {
      for (const page of context.pages())
        await page.screenshot({ timeout: 5000, path: testInfo.outputPath(`test-failed-${++ordinal}.png`) });
    }
  }
  for (const context of contexts)
    await context.close();
});

describe(`Browser: ${browserType.name()} with Metamask`, () => {
  let page: Page
  let context: BrowserContext
  let metamask: MetaMask

  const resetBrowserContext = async () => {
    if (page) await page.close()
    if (context) await context.close()

    context = await browserType.launchPersistentContext('', {
      headless: false, // Extensions only work in Chrome / Chromium in non-headless mode.
      slowMo,
      args,
    })

    log('Waiting until Metamask installs itself...')
    await waitForExpect(async () => {
      expect(context.backgroundPages().length).to.eq(1)
    })

    metamask = new MetaMask(await context.newPage())
    await metamask.activate()
    page = await context.newPage()
    addPageDiagnostics(page)
  }

  before(() => resetBrowserContext())
  after(() => context?.close())

  before(async () => {
    log('Connecting Metamask to the app...')
    await page.goto(`${baseUrl}Guides/Transactions/Switching%20Networks`)

    const popupPromise = waitForPopup(context)
    await page.click(XPath.text('button', 'Connect'))
    const popupPage = await popupPromise

    await popupPage.click(XPath.text('button', 'Next'))
    const pages = context.pages().length
    await popupPage.click(XPath.text('button', 'Connect'))
    await waitForExpect(() => {
      expect(context.pages().length).to.be.eq(pages - 1) // Wait for the popup to be closed automatically.
    })
    log('Metamask connected to the app.')
  })

  describe('Guides/Transactions', () => {
    it('Switches networks', async () => {
      await page.goto(`${baseUrl}Guides/Transactions/Switching%20Networks`)

      await waitForExpect(async () => {
        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='1']`)).to.be.true
      })

      const popupPromise = waitForPopup(context)
      await page.click(XPath.text('button', 'Switch to Rinkeby'))
      const popupPage = await popupPromise
      await popupPage.click(XPath.text('button', 'Switch network'))

      await waitForExpect(async () => {
        expect(await page.isVisible(`//*[text()='Current chain: ' and text()='4']`)).to.be.true
      })
    })
  })
})

describe(`Browser: ${browserType.name()} with Metamask`, () => {
  let page: Page
  let context: BrowserContext
  let metamask: MetaMask

  const resetBrowserContext = async () => {
    if (page) await page.close()
    if (context) await context.close()

    context = await browserType.launchPersistentContext('', {
      headless: false, // Extensions only work in Chrome / Chromium in non-headless mode.
      slowMo,
      args,
    })

    log('Waiting until Metamask installs itself...')
    await waitForExpect(async () => {
      expect(context.backgroundPages().length).to.eq(1)
    })

    metamask = new MetaMask(await context.newPage())
    await metamask.activate()
    page = await context.newPage()
    addPageDiagnostics(page)
  }

  before(() => resetBrowserContext())
  after(() => context?.close())

  before(async () => {
    log('Connecting Metamask to the app...')
    await page.goto(`${baseUrl}balance`)

    const pages = context.pages().length
    await page.click(XPath.text('button', 'Connect'))
    await waitForExpect(() => {
      expect(context.pages().length).to.be.equal(pages + 1)
    })
    const popupPage = context.pages()[context.pages().length - 1]

    await popupPage.click(XPath.text('button', 'Next'))
    await popupPage.click(XPath.text('button', 'Connect'))
    log('Metamask connected to the app.')
  })

  describe('Balance', () => {
    it('Reads the ETH2 staking contract and account balance', async () => {
      await page.goto(`${baseUrl}balance`)

      await waitForExpect(async () => {
        expect(await page.isVisible(XPath.text('span', 'ETH2 staking contract holds:'))).to.be.true
      })

      await waitForExpect(async () => {
        expect(await page.isVisible(XPath.text('span', 'Account:'))).to.be.true
        expect(await page.isVisible(XPath.text('span', 'Ether balance:'))).to.be.true
      })
    })
  })
})

private browserContext: BrowserContext | undefined;

async createNewPage(browser: Browser, context: BrowserContext) {
    const playwrightPage = await this.createPageFn({ config: this.config!, browser, context });
    return new PlaywrightLauncherPage(this.config!, this.product, this.testFiles!, playwrightPage);
  }

private browserContext?: BrowserContext;

private debugBrowserContext?: BrowserContext;