@playwright/test#test TypeScript Examples

async selectSlide(index: number) {
        await test.step(`Select slide at index ${index}`, async () => {
            await this.page.click(
                `.SortableSlideMiniature:nth-child(${index + 1})`
            );
            await this.page.waitForSelector(
                `.SortableSlideMiniature:nth-child(${
                    index + 1
                }) .SelectedSlideMiniature`
            );
        });
    }

test("Draw simple shapes in multiple slides", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawEllipse();
    await excalideckEditorPage.expectToSee(
        "two slide miniatures",
        "the second slide miniature as selected",
        "an ellipse in the drawing area",
        'the corresponding ellipse "reflected" in the selected slide miniature',
        "a rectangle in the non-selected slide miniature"
    );
});

test("Draw common elements", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.goToSettings();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.goToSlides();
    await excalideckEditorPage.expectToSee(
        "a rectangle (common element) in the middle of the drawing area",
        "two slide miniatures",
        'the rectangle "reflected" in each slide miniature'
    );
});

test("Delete a slide", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawEllipse();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawDiamond();
    await excalideckEditorPage.selectSlide(1);
    await excalideckEditorPage.deleteSlide();
    await excalideckEditorPage.expectToSee(
        "two slide miniatures",
        "the first slide miniature has a rectangle",
        "the second slide miniature has a diamond",
        "a rectangle in the drawing area"
    );
});

test("Draw a simple shape in a single slide", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.expectToSee(
        "a rectangle in the drawing area",
        'the corresponding rectangle "reflected" in the slide miniature'
    );
});

/*
     * Private API
     */

    private async drawShape(shape: "rectangle" | "ellipse" | "diamond") {
        await test.step(
            `Draw ${shape} in the middle of the drawing area`,
            async () => {
                await this.runAndWaitForSlideMiniaturesChange(async () => {
                    // Select the shape
                    await this.page.click(`[title*="${shape}" i]`);
                    // Configure it not to draw sloppy shapes, as they are
                    // random and produce visual diffs from one run to the other
                    await this.page.click('[title*="architect" i]');
                    // Fill it to make it more visible
                    await this.page.fill(
                        'input[aria-label="background" i]',
                        "000000"
                    );
                    await this.page.click('[title*="solid" i]');
                    // Draw the shape
                    const initialX = this.viewportSize.width / 2 - 100;
                    const initialY = this.viewportSize.height / 2 - 50;
                    await this.page.mouse.move(initialX, initialY);
                    await this.page.mouse.down();
                    await this.page.mouse.move(initialX + 200, initialY + 100);
                    await this.page.mouse.up();
                });
            }
        );
    }

async expectToSee(...expectations: string[]) {
        const stepTitle = [
            "Expect to see:",
            castArray(expectations)
                .map((expectation) => `${expectation}`)
                .join(", "),
        ].join(" ");
        await test.step(stepTitle, async () => {
            expect(await this.page.screenshot()).toMatchSnapshot(
                this.issueNextSnapshotName()
            );
        });
    }

async changePrintableArea(width: number, height: number) {
        await test.step(
            `Change printable area to have width ${width} and height ${height}`,
            async () => {
                await this.page.fill(
                    'input[aria-label*="width" i]',
                    String(width)
                );
                await this.page.fill(
                    'input[aria-label*="height" i]',
                    String(height)
                );
            }
        );
    }

async excludeCommonElementsForSlide() {
        await test.step("Exclude common elements for slide", async () => {
            await this.runAndWaitForSlideMiniaturesChange(async () => {
                await this.page.click(
                    'button[title*="include common elements" i][aria-checked=true]'
                );
                await this.page.waitForSelector(
                    'button[title*="include common elements" i][aria-checked=false]'
                );
            });
        });
    }

test("Exclude common elements from a slide", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.goToSettings();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.goToSlides();
    await excalideckEditorPage.selectSlide(1);
    await excalideckEditorPage.excludeCommonElementsForSlide();
    await excalideckEditorPage.expectToSee(
        "two slide miniatures",
        "a rectangle (common element) in the first miniature",
        "no rectangle (common element) in the second slide",
        "no rectangle (common element) in the drawing area"
    );
});

async moveSlide(fromIndex: number, toIndex: number) {
        await test.step(
            `Move slide at index ${fromIndex} to index ${toIndex}`,
            async () => {
                await this.runAndWaitForSlideMiniaturesChange(async () => {
                    await this.page.dragAndDrop(
                        `.SortableSlideMiniature:nth-child(${fromIndex + 1})`,
                        `.SortableSlideMiniature:nth-child(${toIndex + 1})`,
                        { targetPosition: { x: 10, y: 10 } }
                    );
                });
            }
        );
    }

async deleteSlide() {
        await test.step("Delete slide", async () => {
            await this.runAndWaitForSlideMiniaturesChange(async () => {
                this.page.once("dialog", async (dialog) => {
                    await dialog.accept();
                });
                await this.page.click('button[title*="delete slide" i]');
            });
        });
    }

test("Drag and drop slides to rearrange them", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawEllipse();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawDiamond();
    await excalideckEditorPage.moveSlide(2, 0);
    await excalideckEditorPage.expectToSee(
        "three slide miniatures",
        "the first slide miniature has a diamond",
        "the second slide miniature has a rectangle",
        "the third slide miniature has an ellipse",
        "a diamond in the drawing area"
    );
});

async goToSettings() {
        await test.step("Go to Settings view", async () => {
            await this.page.click(
                '.InactiveViewInputRadioButton:has-text("Settings")'
            );
            await this.page.waitForSelector(
                '.ActiveViewInputRadioButton:has-text("Settings")'
            );
        });
    }

async goToSlides() {
        await test.step("Go to Slides view", async () => {
            await this.page.click(
                '.InactiveViewInputRadioButton:has-text("Slides")'
            );
            await this.page.waitForSelector(
                '.ActiveViewInputRadioButton:has-text("Slides")'
            );
        });
    }

/*
     * Public API
     */

    async go() {
        await test.step("Go to Excalideck Editor test page", async () => {
            await this.page.goto("/");
        });
    }

test.describe('entry page', () => {
  test('should auto jump to entry page', async ({ page }) => {
    await expect(page).toHaveURL('/entry/login');
  });

  test('auto goto entry if not login', async ({ page }) => {
    await page.goto('/main');
    await expect(page).toHaveURL('/entry/login?redirect=%2Fmain'); // should with redirect
  });

  test('registry', async ({ page }) => {
    await page.locator('text=注册账号').click();
    await expect(page).toHaveURL('/entry/register');

    await page.locator('button:has-text("注册账号")').click();
    await expect(page.locator('p.text-red-500')).toHaveText('邮箱不能为空');

    await page.locator('[name="reg-email"]').click();
    await page.locator('[name="reg-email"]').fill('123456789');
    await page.locator('button:has-text("注册账号")').click();
    await expect(page.locator('p.text-red-500')).toHaveText('邮箱格式不正确');

    await page.locator('[name="reg-email"]').click();
    await page.locator('[name="reg-email"]').fill('[email protected]');
    await page.locator('button:has-text("注册账号")').click();
    await expect(page.locator('p.text-red-500')).toHaveText('密码不能低于6位');

    await page.locator('[name="reg-password"]').click();
    await page.locator('[name="reg-password"]').fill('1234');
    await page.locator('button:has-text("注册账号")').click();
    await expect(page.locator('p.text-red-500')).toHaveText('密码不能低于6位');
  });
});

test.describe("Player", ()=>{
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test
    await page.goto("http://localhost:8080", { waitUntil: "domcontentloaded" });
  });

  test("is present", async ({ page }) => {
    const selector = "dotlottie-player";
    const element = await page.innerHTML(selector);
    expect(element).toBeDefined();
  });

  test("controls are present", async ({ page }) => {
    const selector = ".controls";
    const element = await page.$$(selector);
    expect(element.length).toBeGreaterThan(0);
  });

  test("seeker is present", async ({ page }) => {
    const selector = ".seeker";
    const element = await page.$$(selector);
    expect(element.length).toBeGreaterThan(0);
  });

  test("screenshot matches", async ({ page }) => {
    // wait for the page to load (could use some other signal?)
    await page.waitForTimeout(1000);

    const screenshot = await page.screenshot({fullPage: true});
    expect(screenshot).toMatchSnapshot(`player-test.png`, { threshold: 0.2 });
  });
});

test("Skip a slide", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.drawRectangle();
    await excalideckEditorPage.addSlide();
    await excalideckEditorPage.drawEllipse();
    await excalideckEditorPage.selectSlide(1);
    await excalideckEditorPage.skipSlide();
    await excalideckEditorPage.expectToSee(
        "two slide miniatures",
        "the second slide miniature is skipped"
    );
});

test.beforeAll(async () => {
    server.listen(8000);
});

test.runWith(new FirefoxEnv(options), { tag: 'firefox' });

Object.entries(testPages).map(([name, url]) => test(name, async ({ browserName, page }) => {
    await page.goto(baseUrl + url);
    await page.waitForTimeout(1000);
    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(name + '.png', { threshold: 0.2 });
}));

test.afterAll(async () => {
    server.close();
});

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test.beforeEach(async ({ page, context }) => {
  await loginToDemoUser(page, context);
});

test('basic test', async ({ page }) => {
  await page.goto('/');
  const brand = page.locator('data-test-id=brand');
  await expect(brand).toHaveText('MUI Toolpad CE');
});

test("Change the printable area", async ({ page }) => {
    const excalideckEditorPage = new ExcalideckEditorPage(page);
    await excalideckEditorPage.go();
    await excalideckEditorPage.goToSettings();
    await excalideckEditorPage.changePrintableArea(1000, 1000);
    await excalideckEditorPage.expectToSee("a square printable area");
});

async skipSlide() {
        await test.step("Skip slide", async () => {
            await this.page.click('button[title*="skip" i][aria-checked=true]');
            await this.page.waitForSelector(
                'button[title*="skip" i][aria-checked=false]'
            );
        });
    }

async addSlide() {
        await test.step("Add slide to the deck", async () => {
            await this.runAndWaitForSlideMiniaturesChange(async () => {
                await this.page.click('button[title*="add slide" i]');
            });
        });
    }