剧作家1.33和1.34的新功能-DEV365 开发者社区

大家好！

今天，我们为您提供了一个特别版，因为我们深入研究了我们最近在发行版1.33和1.34中推出的令人兴奋的更新。我们充满活力的Debbie和Lusha二人组坐下来详细讨论这些。因此，事不宜迟，让我们从中潜水。

UI模式更新

UI mode一直是许多人的最爱，它变得更好了！在其最新的化身中，UI模式现在包括可视化测试前后运行的钩子以及固定装置等功能。此外，该更新还包含UI模式内的自定义导航步骤。

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

test.beforeEach(async ({ page }) => {
  await test.step('navigate', async () => {
    await page.goto('https://playwright.dev/');
  });
});

test('has title', async ({ page }) => {
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  // ...
});

此最新更新不仅允许测试的更顺畅地运行，而且还允许更好的视觉回归测试。例如，如果我们进行屏幕截图测试，然后有人进入代码并删除按钮，则会看到故障。此更新包括一个“附件”选项卡，该选项卡，可让您探索和比较带有滑块的屏幕截图以覆盖并更好地查看差异。

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

test.beforeEach(async ({ page }) => {
  await test.step('navigate', async () => {
    await page.goto('https://playwright.dev/');
  });
});

test('should take screenshot', async ({ page }) => {
  // programmatically remove the button for this example
  await page.getByText('Get Started').evaluate((el) => el.remove());

  await expect(page).toHaveScreenshot();
});

这是顶部的樱桃：所有这些UI模式功能也将出现在Trace Viewer上。因此，当测试失败CI时，您仍然会获得相同的经验。

项目拆卸

在我们深入研究项目拆除之前，重要的是要讨论设置和dependencies。当数据之间共享数据时（例如设置数据库），不同项目之间的依赖关系是一个有用的功能。

。

以前，测试后拆除数据库是一项艰巨的任务。但是，最新更新引入了“拆卸”功能，该功能允许设置，依赖关系和最终清理过程的平稳运行。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'setup db',
      testMatch: /global.setup\.ts/,
      teardown: 'cleanup db',
    },
    {
      name: 'cleanup db',
      testMatch: /global.teardown\.ts/,
    },
    {
      name: 'chromium',
      use: devices['Desktop Chrome'],
      dependencies: ['setup'],
    },
    {
      name: 'webkit',
      use: devices['Desktop Safari'],
      dependencies: ['setup'],
    },
  ],
});

新定位器API

使用新的Locators API，您可以更精确地选择元素。 locator.and功能使您可以组合不同的选择器来查明精确元素。

await page.getByRole('button', { name: 'Sign Up' })
          .and(page.getByTitle('Sign Up Today'))
          .click();

当您要等待两个元素出现时，使用locator.or API。

const newEmail = page.getByRole('button', { name: 'New email' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();

最后，hasNot和hasNotText api非常适合否定，使您可以找到没有某些属性的元素。

await page.locator('tr')
          .filter({ hasNotText: 'helicopter' })
          .filter({ hasNot: page.getByRole('button') })
          .screenshot();

其他特征

除了主要更新之外，还有一些漂亮的杂项。这些包括：

Expect Configure：这种新方法使您可以创建“期望”的新实例，例如软主张和缓慢的期望，这使您能够以更精细的方式控制测试的行为。

  const softAssert = expect.configure({ soft: true });
  const slowExpect = expect.configure({ timeout: 10_000 });

Web Server Configurations：Web服务器现在允许您配置STDERR和Stdout，帮助您更有效地管理本地Dev Server。

  // playwright.config.ts
  import { defineConfig } from '@playwright/test';

  export default defineConfig({
    // Run your local dev server before starting the tests
    webServer: {
      command: 'npm run start',
      url: 'http://127.0.0.1:3000',
      reuseExistingServer: !process.env.CI,
      stdout: 'pipe', // Can be ‘ignore’ (default) or ‘pipe’
      stderr: 'pipe', // Can be ‘ignore’ or ‘pipe’ (default)
    },
  });

New Web Assertion：添加了一个新的Web断言toBeAttached，即使隐藏了DOM中是否存在元素，该元素是否存在。

  await expect(page.getByRole('button', { name: 'Sign Up' })).toBeAttached();

自定义记者的API方法：有一个新的异步方法，“退出的记者”，它允许您运行推迟作业。

  await reporter.onExit();

浏览器上下文上的新事件：控制台和对话框事件现在从所有页面上弹出到浏览器上下文。

控制台：

  browserContext.on('console', message => console.log(message));
  await page.evaluate(() => console.log('hello context!'));

对话框：

  context.on('dialog', dialog => {
    dialog.accept();
  });

总的来说，这些最新更新提供了许多改进，使用户体验更加直观和高效。我们很高兴您尝试这些新功能，我们热切期待您的反馈。与往常一样，请留意我们的未来发布！

，不要忘记给我们一个明星，订阅我们的Twitter，YouTube和Discord，并给我们一个star on GitHub。给我们写您的评论 - 我们阅读了所有评论。

直到下一个更新，愉快的测试！

阅读docs
观看视频here
在Discord上加入我们的社区