How can I write tests in Typescript Playwright, using the Page Object Model and inheriting from a base page class, so that they will run in UI mode?

huangapple go评论120阅读模式
英文:

How can I write tests in Typescript Playwright, using the Page Object Model and inheriting from a base page class, so that they will run in UI mode?

问题

I'm here to provide the translated content:

如果我有一个看起来像这样的测试:

import { test, expect, Locator, Page } from '@playwright/test';

test('whatever', async ({page}) => {
  page.goto('https://google.ca/');
})

当我运行 "npx playwright test --ui" 时,它可以正常运行。

但如果我修改测试脚本,引入了页面对象,如下所示:

import { test, expect, Locator, Page } from '@playwright/test';
import { YoutubeMyoutubeMastheadPage } from '../pages/youtubeMastheadPage';

test('Log in to youtube', async ({ page }) => {
    const masthead = new YoutubeMyoutubeMastheadPage(page);

    await masthead.signInToYoutube();
    await expect(page.locator('xpath=//img[@alt="Avatar image"]'));
});

test('whatever', async ({page}) => {
  page.goto('https://google.ca/');
})

当我运行 "npx playwright test --ui" 时,它显示找不到测试,只显示了 youtubeMastheadPage。

youtubeMastheadPage 的代码如下:

export class YoutubeMyoutubeMastheadPage extends basePage{

    readonly page: Page;

    constructor(page: Page){
        super(page)
        this.page = page;

    }
    // 其他方法
}

这似乎是基于 Playwright 文档中的页面对象模式 (POM) 实现的,但在引入页面对象时无法识别测试。

英文:

I'm new to both playwright and typescript, so this is probably a very silly question.

If I have a test that looks like this:

import { test, expect, Locator, Page } from '@playwright/test';

test('whatever', async ({page}) => {
  page.goto('https://google.ca'/);
})

and I run "npx playwright test --ui", it comes up no problem.

I've created two page objects, one of which is a base class that the page I care about extends. If I modify my test script to look like this:

import { test, expect, Locator, Page } from '@playwright/test';
import { YoutubeMyoutubeMastheadPage } from '../pages/youtubeMastheadPage';

test('Log in to youtube', async ({ page }) => {
    const masthead = new YoutubeMyoutubeMastheadPage(page);

    await masthead.signInToYoutube();
    await expect(page.locator('xpath=//img[@alt="Avatar image"]'));
  });

test('whatever', async ({page}) => {
  page.goto('https://google.ca'/);
})

and I run "npx playwright test --ui", it says no tests are found and simply shows the youtubeMastheadPage.

youtubeMastheadPage looks like this:

export class YoutubeMyoutubeMastheadPage extends basePage{

    readonly page: Page;

    constructor(page: Page){
        super(page)
        this.page = page;

    }
[other methods]
}

I tried to implement this based on the POM from the playwright docs, but can't seem to get it to recognize my test when there is a page object imported.

答案1

得分: 1

你写的代码应该可以工作。

不过,我注意到 page.goto('https://google.ca/'); 是无效的(注意语法错误)。

我怀疑你可能遇到了语法错误,这就是为什么显示没有找到测试的原因。

另外,你使用的 expect 函数不完整,它应该以以下形式出现:expect(page.locator('...')).toBe(...)。你需要使用 expect 函数来检查某个属性或值,就像下面的示例中一样:

英文:

The code you've written should work.

However, I noticed that page.goto('https://google.ca'/); is invalid (notice the syntax error).

My suspicion is that you are getting a syntax error and that is why it says no tests found.

Also, the expect function that you have used is not complete, it should be in the form expect(page.locator('...')).toBe(...). You need to check some property or value using expect function, as in the example below:

huangapple
  • 本文由 发表于 2023年6月8日 03:45:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76426659.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定