Stage 2 Integration with Playwright

---

[Step 0] - Installation of dependencies

npm

 npm --save @mapgrab/playwright

yarn

 yarn add @mapgrab/playwright

pnpm

 pnpm add @mapgrab/playwright

[Step 1] - Integration with framework and write first test

warning

In the following code, the mainMap string is the map identifier given during the installation of the MapGrab interface in stage 1!

By Fixtures (recomended)

info

Read more about Playwright fixtures

// support/index.ts
import { test as playwrightTest, mergeTests, expect as playwrightExpect, mergeExpects } from '@playwright/test';
import { test as mapGrabTest, expect as mapGrabExpect } from '@mapgrab/playwright';

export const test = mergeTests(playwrightTest, mapGrabTest);
export const expect = mergeExpects(playwrightExpect, mapGrabExpect);

//tests/my-test.spec.ts
import { test, expect } from '../support';

test('Country should display on map', async ({ page, mapLocator, mapController }) => {
  await page.goto('/');
  await mapController('mainMap').setView({ zoom: 2, center: [22, 42] });
  const country = mapLocator('map[id=mainMap] layer[id=countries-fill] filter["all", ["==", ["get", "fid"], 74]]');

  await expect(country).toBeVisibleOnMap();
});

Without fixtures

//tests/my-test.spec.ts
import { test, expect } from '@playwright/test';
import { MapLocator, MapController } from '@mapgrab/playwright';

test('Country should display on map', async ({ page }) => {
    await page.goto('/');
    const mapController = new MapController(page, 'mainMap');
    const country = new MapLocator(
      page,
      'map[id=mainMap] layer[id=countries-fill] filter["all", ["==", ["get", "fid"], 74]]'
    );

    await mapController.setView({ zoom: 2, center: [22, 42] });

    await expect(country).toBeVisibleOnMap();
});