使用 Playwright API 的 POST 请求上传 Content-Type 为 multipart/form-data 的文件

使用 Playwright API 的 POST 请求上传 Content-Type 为 multipart/form-data 的文件

· 575 词 · 3 分钟 读完 playwright基础 翻译

在为我的 API 编写自动化脚本时,我遇到了一个问题:如何使用 Playwright API 发起 POST 请求来上传文件。最后,我在一个 Slack 对话里 找到了答案,于是决定在这里分享。

我尝试进行的 API 调用是向文件接口发送 POST 请求以上传文件,下面的例子中是一个 .png 文件。接口要求请求类型必须为 multipart/form-data。首先,我查看了 Playwright 文档 中关于 apiRequestContext.post() 的部分,发现可以传递的一个选项是 multipart(而不是通常用于发布 JSON 数据的 data)。


  • multipart <Object<string, string|number|boolean|[ReadStream]|Object>> 提供一个对象,该对象将使用 multipart/form-data 编码作为 HTML 表单发送,并作为请求体。如果指定了此参数,则 content-type 头将被设置为 multipart/form-data,除非显式提供。文件值可以传递为 fs.ReadStream 或包含文件名、mime 类型及其内容的类文件对象。#
  • name <string> 文件名
  • mimeType <string> 文件类型
  • buffer <Buffer> 文件内容

在查看文档和 Slack 对话后,我意识到还需要进一步了解如何创建一个 buffer 并将其传递到 POST 请求中。之后,我成功地构建了一个运行正常的 Playwright 测试,如下例所示。

import { expect, request } from "@playwright/test";
import fs from "fs";
import path from "path";


test("POST: Upload a file", async ({ request, baseURL }) => {
  const file = path.resolve("lib/", "logo.png");
  const image = fs.readFileSync(file);

  const response = await request.post(baseURL + "/files", {
    headers: {
      Accept: "*/*",
      ContentType: "multipart/form-data",
    },
    multipart: {
      file: {
        name: file,
        mimeType: "image/png",
        buffer: image,
      },
      title: "Logo of Business",
    },
  });
  const body = JSON.parse(await response.text());

  expect(response.status()).toBe(201);
  expect(body.title).toBe("Logo of Business");
  expect(body.type).toBe("png");
}

更多关于 Http POST 方法不同请求类型的详细信息可以在 MDN Web Docs 上找到。

来源

来源网址: https://playwrightsolutions.com/making-a-post/

发布时间: 2022-03-12T06:12:26.000Z