Git Product home page Git Product logo

Comments (6)

gpBlockchain avatar gpBlockchain commented on August 18, 2024 1

How to test browser extensions with puppeteer?

const pathToExtension = path.join(process.cwd(), 'my-extension');
  const browser = await puppeteer.launch({
    headless: 'chrome',
    args: [
      `--disable-extensions-except=${pathToExtension}`,
      `--load-extension=${pathToExtension}`,
    ],
  });

How to make the web page interact with the extension?

// switch to the extension that pops up
 const page =  (await browser.pages()).find(page=>page.url().includes("popup"))
 await page.bringToFront()

// open the extension as a webpage
const EXTENSION_URL_PRE = "chrome-extension://"
const backgroundPageTarget = await browser.waitForTarget(
        target => target.type() === 'background_page' || target.type() === 'service_worker'
    );
const extensionId = backgroundPageTarget.url().split("/")[2]
const page = await browser.newPage()
await page.goto(`${EXTENSION_URL_PRE}${extensionId}/${url}`)

Extensions in Chrome/Chromium currently only work in non-headless mode , so how to run in CI?

Xvfb is an X server that can run on machines with no display hardware and no physical input devices

xvfb-run --auto-servernum npm run test

how to debug in ci?

upload a report for each test
ci: https://github.com/gpBlockchain/nexus-e2e/actions/runs/3907641572
artifacts report :https://github.com/gpBlockchain/nexus-e2e/suites/10345639037/artifacts/509640088

      - name: Publish e2e test report
        if: success() || failure()
        uses: actions/upload-artifact@v2
        with:
          name: jfoa-build-reports-${{ runner.os }}
          path: ./packages/e2e/mochawesome-report/

How to ensure the stability of test cases?

//todo

from nexus.

gpBlockchain avatar gpBlockchain commented on August 18, 2024
  • Write a website like test-dapp
  • Learn more about metamask-e2e
  • Write a demo for nexus e2e

from nexus.

gpBlockchain avatar gpBlockchain commented on August 18, 2024

nexus-e2e:
git:https://github.com/gpBlockchain/nexus-e2e/tree/main/packages/e2e-web
web: https://gpblockchain.github.io/nexus-e2e/

from nexus.

gpBlockchain avatar gpBlockchain commented on August 18, 2024

e2e : https://github.com/gpBlockchain/nexus-e2e/tree/main/packages/e2e
like dappeteer, provide a framework for wallet e2e ,users can call the wallet through e2e

it("connect", async () => {
        browser = await launchWithNexus(
            {nexusPath: "./build"}
        )
        nexusWallet = await setUpNexus(browser, {mock: true})
        page = await browser.newPage()
        await page.goto("http://localhost:9011")
        await page.click("#connectButton")
        const nexusPage = await nexusWallet.getNotificationPage()
        let res1 = await nexusWallet.popup.getHelloNexus(nexusPage);
        expect(res1).to.be.include("Hello Nexus")
        await nexusWallet.close()
        const newPage = await nexusWallet.popup.getNewPage();
        res1 = await nexusWallet.popup.getHelloNexus(newPage);
        expect(res1).to.be.include("Hello Nexus")
        await newPage.close()
    })

nexus e2e methods


export type NexusSetUpOptions = {
    mock: boolean
}

export type PopupPageHelper = {
    getNewPage: () => Promise<Page>
    getHelloNexus: (page: Page) => Promise<string>;
}
export type NexusWallet = {
    popup: PopupPageHelper;
    getNotificationPage: () => Promise<Page>
    close: () => void
}

from nexus.

gpBlockchain avatar gpBlockchain commented on August 18, 2024

how to debug in ci?

example failed case

not found approve-- button

test case

 it("demo", async () => {
        await step("click connectButton", async () => {
            await page.click("#connectButton")
        })
        await step("click nexus wallet approve", async () => {
                const notificationPage = await getNotificationPage(browser, extensionId, NexusUrl.notification)
                await notificationPage.getByText(NotificationPageTextInfo.Approve+"--").click()
            }
        )
    })

ci run failed report

https://gpblockchain.github.io/nexus-e2e/8/#suites/b3ab64535ad66c4ce064c5467c723836/a54b32bd7a94d03c/
image
image
image

from nexus.

homura avatar homura commented on August 18, 2024

This issue is done

from nexus.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.