如何在playwright中创建自定义断言

如何在playwright中创建自定义断言

· 1,129 词 · 6 分钟 读完 playwright进阶 翻译

我喜欢阅读,特别是在气温在 80 华氏度中段的时候。坐在泳池边,手捧一本好书,是多么惬意的享受。当一本书写得很好时,阅读起来就很轻松,我可以花几个小时翻页,让我的想象力创造场景和人物……其实代码也是一样的。当代码写得很好时,我通过阅读它就能轻松理解测试/断言在做什么,就像读书一样。我尽量写出可读性强的代码:从有意义的变量名到在逻辑上合适的地方添加空行(“意大利面条类型的代码”我实在看不下去)。

Playwright 可以比较容易的编写出可读性强的代码。以下是一些示例:

import { expect } from "@playwright/test";

expect(student.grade).toBeGreaterThanOrEqual(1);
expect(student.loan).toBeTruthy();
expect(student.employer).toBeNull();

默认断言

这是一个通用值断言的链接

但是如果你期望一个字符串而你不太关心其值,只想检查其类型该怎么办呢?不幸的是,没有开箱即用的方法,所以我以前是这样写的:

// 我以前如何检查字符串
let framework = "playwright";

expect(typeof framework).toBe("string");

我不是说它不可读,但我更希望代码写成这样:

// 我现在如何检查字符串
let framework = "playwright";

expect(framework).toBeString();

如果你阅读了上面代码块中的注释(另一种使代码可读的方法),你可能已经猜到可以编写自己的 expect。你来到这个页面是为了扩展你的知识,现在我们要扩展你的 expect!

要使 toBeString() 检查工作,你需要在 playwright.config.ts 中添加以下内容

playwright.config.ts👇

expect.extend({
  toBeString(received: string) {
    const check = typeof received == "string";

    if (check) {
      return {
        message: () => "passed",
        pass: true,
      };
    } else {
      return {
        message: () =>
          `toBeString() 断言失败。\n你期望 '${received}' 是一个字符串,但它是一个 ${typeof received}\n`,
        pass: false,
      };
    }
  },
});

解释:我们通过添加 toBeString() 断言扩展了我们的 expect。即使看起来断言接受一个参数,但实际上并没有。 receivedexpect(value) 的第一个括号中的值。然后我们检查接收到的值是否是字符串类型,如果是,则检查通过。如果不是,我们就让检查失败,并通过添加自定义消息使代码更具可读性。

让我们看看它是如何工作的。

let value = 123;

expect(value).toBeString();

这个断言会失败 ☹️

由于在这个例子中 value 显然不是字符串,所以我预计它会失败。果然不出所料,注意自定义的错误信息,这个很好 👇。

图片2

我还在我的工具包中添加了 .toBeNumber().toBeBoolean()

几周前,我写了 .toBeOneOfValues(),这是一个改变游戏规则的方法。我在无法预测确切值的时候使用它,但我知道它应该是已知值之一。我主要用于为 GET 请求编写 API 检查。例如,当我有一个返回的收费参数,它可能是“pending”(待处理)、“failed”(失败)或“successful”(成功),我只想检查每一个返回的结果都有一个预期的值。

let validValues = ["failed", "pending", "successful"];
let testValue = "created";

expect(testValue).toBeOneOfValues(validValues);

在底层我们将检查数组是否包含传递的值

同样,它会打印出自定义的错误信息 👇。

图片3

以下是需要添加到 playwright.config.ts 中的源代码

playwright.config.ts

expect.extend({
  toBeOneOfValues(received: any, array: any[]) {
    const check = array.includes(received);

    if (check) {
      return {
        message: () => "通过",
        pass: true,
      };
    } else {
      return {
        message: () =>
          `toBeOneOfValues() 断言失败。\n你期望 [${array}] 包含 '${received}'\n`,
        pass: false,
      };
    }
  },
});

这里最重要的收获是要意识到你可以创建你需要的自定义断言,以提高可读性。对我有帮助的是查看我要检查的值,并在脑海中说“我希望这个值……”然后用英语完成这个句子。这样你就得到了伪代码。(中文用户表示增加英文的可读性其实 😂,你懂的)

这篇文章是基于此文档编写的。如果你使用 TypeScript,则需要额外的一步使自定义断言工作,这涉及添加一个 global.d.ts 文件。以下是我为上述两个 expect 编写的文件。

global.d.ts

export {};

declare global {
  namespace PlaywrightTest {
    interface Matchers<R> {
      toBeOneOfValues(array: any[]): R;
      toBeString(): R;
    }
  }
}

来源

URL 来源: https://playwrightsolutions.com/creating-custom-expects-in-playwright-how-to-write-your-own-assertions/

发布时间: 2023-06-26T12:30:49.000Z