标签: playwright

我想使用 Playwright JS 从下面的 DOM 中选择“全部”选项，我已经尝试过page.selectOption('select#rows per page', '-1');但page.selectOption('id=mui-55656', '-1');没有成功。任何帮助，将不胜感激。谢谢。

我正在编写一个测试来在我的网站上注册用户。使用@playwright/test ，我在playwright.config.ts中定义了几个不同的项目：

{
  name: 'iPhone 12 Pro',
  use: devices['iPhone 12 Pro'],
},
{
  name: 'iPhone 12 Pro Max',
  use: devices['iPhone 12 Pro Max'],
},
{
  name: 'iPhone 5/SE',
  use: devices['iPhone SE'],
},

我的测试如下所示：

test('Register a user', async ({ page }) => {
  // Go to baseUrl/webapp/
  await page.goto(`${baseUrl}webapp/`);

  // Click the register tab.
  await page.click('ion-segment-button[role="tab"]:has-text("Register")');
  await page.click('input[name="mail"]');
  // @TODO: How do I get the project name here?
  await page.fill('input[name="mail"]', `test@example.com`);
  // Press Tab
  await page.press('input[name="mail"]', 'Tab');
  await …

我正在使用我们的网站测试导航expect(page.url()).toContain('/nav');。\n当浏览代码时，我可以清楚地看到我们在单击后点击了该 url 字符串。

我尝试将我的代码放入 Promise 中和之外，并给出相同的错误：

Expected substring: "/nav"\nReceived string:    "https://website.com/about"\n\n      283 |     page.waitForNavigation();\n      284 |     await page.hover('nav >> text=Nav');\n      285 |     await page.click('nav >> text=Nav');\n      286 |     console.log(page.url());\n    > 287 |     expect(page.url()).toContain('/nav');\n          |                        ^\n      288 |\n      289 |     page.click('text=Next Nav')\n      290 |     expect(page.url()).toContain('/nextNav');\n

链接本身很简单<a href="/nav" class="list__item__link" data-v-0df6efc8>Nav</a>。

控制台日志显示https://website.com/about。

以下是与评论相关的片段：

////##OURSTORY##////\n    page.hover('nav >> text=Our Story');\n    page.waitForNavigation();\n    await page.click('nav >> text=About');\n    expect(page.url()).toContain('story');\n\n    //await page.pause();\n\n    await page.hover('nav >> text=Our Story');\n …

我开始与剧作家进行端到端测试。大多数应用程序都需要进行身份验证。使用用户名/密码机制自动执行此操作非常简单。问题是我要测试的应用程序只有两种身份验证机制：Github OAuth 和电子邮件身份验证链接。具体来说，我在 NextJS 项目中使用 next-auth。

我不知道应该如何与 Playwright 进行端到端测试，我考虑过的选项是：

• 使用模拟用户和模拟会话完全模拟身份验证，然后将会话令牌附加到测试上下文中（如官方文档中所述）。
• 创建一个 Github 用户和/或电子邮件帐户用于测试，并以某种方式真正在 playwrigth 中使用它们。

第一个选项更容易实现，但它不再是端到端测试。第二个选项看起来很难实现，我不知道是否值得推荐。我不知道是否有更智能或更标准化的方法来进行此操作。

我刚刚安装了 playwright (v1.18.1) 来尝试一下 (Windows 11)，我感觉有些不对劲。我可以正常运行 example.spec.ts 脚本，但如果我复制该文件然后尝试运行该副本，则会出现错误no tests found.。

这些步骤看起来很基本...

首先测试运行 C:\\playwright\\test\\tests\\example.spec.ts 脚本...

C:\\playwright\\test\\tests>npx playwright test example.spec.ts\n\nRunning 25 tests using 1 worker\n\n  -  example.spec.ts:14:3 \xe2\x80\xba New Todo \xe2\x80\xba should allow me to add todo items\nTerminate batch job (Y/N)?\n\n  25 skipped\n

[这样有效]然后创建一个副本来开始玩......

C:\\playwright\\test\\tests>copy example.spec.ts test4.ts\n        1 file(s) copied.\n

但在编辑 test4.ts 之前，我检查它是否会运行...

C:\\playwright\\test\\tests>npx playwright test test4.ts\n\n=================\n no tests found.\n=================\nnpm ERR! code 1\nnpm ERR! path C:\\playwright\\test\\tests\nnpm ERR! command failed\nnpm ERR! command C:\\WINDOWS\\system32\\cmd.exe /d …

场景：我需要等待页面上加载某些特定文本，我遇到的问题是文本是输入框的值，而该值是页面上最后加载/显示的内容。

我想知道是否有什么办法可以告诉剧作家：

等待此输入​​框中的文本值=“文本输入值”

我已经使用过，await this.page.locator('my locator').inputValue();但我注意到，当页面加载时间较长时，该值有时会返回空白，因此我需要在继续之前专门等待它。

目前我正在等待特定的 Api 请求完成，该请求目前有效，但我想知道是否有更好的方法？

任何帮助，将不胜感激。

由于 Playwright 的 Node.js 版本贬值，我在 Vercel 上的构建开始失败：

错误：Node.js 版本 12.x 已弃用。2022 年 8 月 9 日或之后创建的部署将无法构建。请在项目设置中将 Node.js 版本设置为 16.x 以使用 Node.js 16。此更改是上游基础设施提供商 (AWS) 做出的决定的结果。

其次是：

错误 playwright@1.22.1：引擎“节点”与此模块不兼容。预期版本“>=14”。出现“12.22.9”错误，发现不兼容的模块。

有没有办法更新 Playwright 的内置 Node.js 版本？

尝试使用 Java 脚本将 Playwright 实现到我使用 POM 框架的新项目之一，但出现如下错误

page.goto: net::ERR_ABORTED; 也许框架已分离？=========================== 日志 ====================== ===== 导航到“URL”，等待“加载”==================================== =========================

测试代码

const {test, expect} = require('@playwright/test');
const {LoginPage} = require('../pageobjects/LoginPage');

test('Test 1',async({page})=>
{
    const username = "SOMEUSERNAME";
    const password = "EQPun9wSe4EaNx7Z";
   const loginPage =  new LoginPage(page);
   loginPage.goTo();
   loginPage.validLogin(username,password);
});

页面代码

class LoginPage{

constructor(page)
{
   this.page = page;
   this.UserName = page.locator("[name='email']");
   this.password = page.locator("[name='password']");
   this.login = page.locator("#loginSubmit");
}

async goTo()
 {
    await this.page.goto("**URL**");
    
    
 }

async validLogin(username,password)
{
   await this.UserName.type(username);
   await this.password.type(password);
   await this.login.click();
   
}
}
module.exports={LoginPage};

我正在尝试编写一个函数来在定位器中查找子元素，例如：

async findElements(locator: Locator){
  return locator.querySelector(some/xpath/or/css);
}

但是，我发现查询选择器在定位器中不可用。querySelector 的等价物是什么？

我想记录剧作家测试用例中的变量之一，但无法在开发人员工具控制台中加载日志，因为我正在使用 page.on() 函数

test('largest contentful paint', async ({ page }) => {
  await page.goto('http://localhost:3000/', { waitUntil: 'networkidle' });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        // the last entry is the largest contentful paint
        const largestPaintEntry = entries.at(-1);
        page.on('console', () => {
          console.log('largestPaintEntry', largestPaintEntry);
        });
        // resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});