Weboldal keresés

typescript - Hogyan futtassunk egy Playwright tesztet adott böngészőkön és képernyőméreten

Van egy E2E tesztcsomagom Playwrighttal, amely különböző böngészőkön és nézetablakokon fut.

A különböző böngészőket és nézetablakokat a playwright.config.ts fájlomban adtam meg:

projects: [
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
    },
  },

  {
    name: 'firefox',
    use: {
      ...devices['Desktop Firefox'],
    },
  },

  {
    name: 'webkit',
    use: {
      ...devices['Desktop Safari'],
    },
  },

  /* Test against mobile viewports. */
  {
    name: 'Mobile Chrome',
    use: {
      ...devices['Pixel 5'],
    },
  },
  {
    name: 'Mobile Safari',
    use: {
      ...devices['iPhone 12'],
    },
  },
]

Vannak bizonyos tesztek, amelyeknek a nézetablak alapján különböző állításokat és kattintásokat kell végrehajtaniuk.

Például, amikor a nézőablak elég kicsi lesz, a fejléc egy hamburger menüvé zsugorodik. Asztali gépen a fejlécben van egy „kijelentkezés” gomb, de mobilon először meg kell nyitni a hamburger menüt, hogy látható legyen a „kijelentkezés” gomb.

Hogyan írhatok olyan tesztet, amely csak mobil nézetablakokon fut (és fordítva, olyan tesztet, amely csak asztali nézetablakokon fut)?

Sikerült működésre bírnom Playwrighttal, de nem tetszett a megoldásom, és gyanítom, hogy van jobb módja ennek.

A isMobile tulajdonságot a test függvényből vettem, majd hozzáadtam egy feltételes kattintást a hamburger menü mobilon való megnyitásához így:

test('given the user is logged in: lets the user log out', async ({
    page,
    baseURL,
    isMobile,
    browserName,
}) => {
    const { id } = await loginAndSaveUserProfileToDatabase({ page });
    await page.goto('./home');

    if (isMobile) {
      await page.getByRole('button', { name: /open main menu/i }).click();
    }

    // Logging the user out should redirect you to the landing page.
    await page.getByRole('button', { name: /open user menu/i }).click();
    await page.getByRole('menuitem', { name: /log out/i }).click();
    expect(page.url()).toEqual(baseURL + '/');
    // ...
}));

Nem szeretem ezt a megközelítést, mert feltételes utasítást visz a tesztbe, ami egy anti-pattern (és a Playwright ESLint plugin is jelzi). Emellett a isMobile nem működik Firefox alatt.

Ideális esetben lenne egy olyan funkció a Playwrightban, mint a TestCafe meta címkéi. A TestCafében hozzáadhatsz egy meta-t a teszthez, és ezen címke alapján szűrheted a teszteket.

test
    .meta('mobile', true)
    ('My test that only runs on mobile', async t => { /* ... */});

De a dokumentációban nem találtam ilyet (a grep címkézést leszámítva, amiben nem vagyok biztos, hogy jól megfelelne ehhez az esethez), ezért teszem fel ezt a kérdést.

Válasz #1

A tesztjeidben használhatod a test.skip-et, hogy elkerüld a feltételes Lint hibákat, így valami ilyesmit: test.skip(!isMobile || browserName==firefox, 'nem mobil');

Ettől eltekintve csak a grep vagy a grepInvert jut eszembe. Talán összegyűjtheted a mobilos tesztjeidet describe blokkokban.

test.describe('mobile', () => {
 test.beforeEach(async ({ page }) => {
    await page.goto(pageUrl);
  });

  test('some test', async ({ page })=>{
   
  });
});

És aztán a playwright konfigurációdban egyszerűen hozzáadsz egy grep-et vagy grepInvert-et a projektjeidhez. Például:

{
    name: 'chromium',
    grepInvert: /mobile/,
    use: {
      ...devices['Desktop Chrome'],
    },
},
{
    name: 'Mobile Chrome',
    grep: /mobile/,
    use: {
      ...devices['Pixel 5'],
    },
},

Kapcsolódó cikkek