6..E2E工具-＜剧作家＞-- 组件测试

àì夳堔傛蜴生んèń 2024-03-16 12:00 65阅读 0赞

大家好，

今天我将介绍 Playwright 中的一项测试版功能：组件。

该团队正在构建一项新功能以使用 Playwright 编写组件测试，所以是时候看看它是如何工作的了。

安装  
要开始使用此功能，您必须安装它。为此，请输入您的终端

npm init playwright@latest -- --ct

该命令会问您两个问题：

你使用哪个框架？（实验性的）  
选择对本教程做出反应

安装 Playwright 浏览器  
选择true

安装结束后，您的项目中将有一个名为：playwright-ct.config.ts. 该文件包含组件测试的配置。

对于本教程，您只需将一个配置、testDir属性从更改./为./src。Playwright 使用此配置来了解用于组件测试的文件所在的位置。在此示例中，您会将测试文件放在与组件相同的文件夹中。

第一次测试  
让我们从第一个组件测试开始。

Icon.spec.tsx在文件夹中创建一个名为的文件src/components/Icon/，并在其中复制此代码。

import {
         expect, test } from '@playwright/experimental-ct-react';
    import Icon from './Icon';
    
    test.use({
         viewport: {
         width: 500, height: 500 } });
    
    const props = {
        
      src: 'src',
      title: 'title',
    }
    
    test('should work', async ({
         mount }) => {
        
      const component = await mount(<Icon src={
        props.src} title={
        props.title} />);
      await expect(component).toHaveAttribute('src', 'src');
      await expect(component).toHaveAttribute('title', props.title);
    });

如您所见，该结构类似于其他测试框架。

您必须从路径中导入与反应组件相关的方法@playwright/experimental-ct-react并导入您的组件。

然后你可以为你的测试设置视口；了解测试在不同的浏览器中运行很重要，因此您还可以在不同的视口中测试您的组件。最后，是时候检查您的组件了。

测试结构简单明了；使用该mount方法，您可以在 DOM 中呈现组件，然后您可以使用 Playwright API 检查结果。

例如，在这种情况下，测试检查src和title属性是否具有正确的值。

使用这些测试，您可以检查组件的正确逻辑或正确表示，并保证在不同浏览器中的正确呈现。

运行测试  
太棒了，你设置了 Playwright，然后编写了测试。现在是运行它的时候了。

轻松挤柠檬，在您的终端中输入以下命令

npx playwright test -c playwright-ct.config.ts

进而

npx playwright show-report

结果是这样的。  
![在这里插入图片描述][12ba3efc5a8b4b07ad4947c5128e9bee.png]  
正如您所注意到的，Playwright 默认在三种不同的浏览器中运行测试。您可以决定在何处运行测试，从配置文件中添加或删除浏览器。