如何使用PlayWright进���POST请求

Question

我卡在这里一段时间了。我需要测试一个网站，我需要发布信息来测试它是否出现在页面上。

到目前为止，我已经做了这个

    (async () => {
        const browser = await webkit.launch();
        const page = await browser.newPage();
        await page.route('http://100.100.100.100/', route => route.fulfill({
            status: 200,
            body: body,
        }));
        await page.goto('https://theurlofmywebsite/');
        await page.click('button')
        await page.click('text=Login with LoadTest')
        await page.fill('#Username','username')
        await page.fill('#Password','password')
        await page.click('#loginButton')
        // await page.waitForSelector('text=Dropdown');
        await page.click('css=span >> text=Test')
        await page.click('#root > div > div > header > ul.nav.navbar-nav.area-tabs > li:nth-child(6) > a','Test')
        await page.waitForSelector('text=Detail')
        await page.screenshot({ path: `example3.png` })
        await browser.close();
    })();
    
    const body = [ my json post request ]

- Isen

---

您可以使用page.evaluate执行一个POST请求。 - hardkoded

你能详细说明问题是什么吗？如果需要，你可以参考这个例子：https://try.playwright.tech/?s=trqt9 - arjunattam

Answer 1

jest.setTimeout(1000000);
let browser: any;
let page: any;
beforeAll(async () => {
    browser = await chromium.launch();
});
afterAll(async () => {
    await browser.close();
});
beforeEach(async () => {
    page = await browser.newPage();
});
afterEach(async () => {
    await page.close();
});



it("should work", async () => {
    await fetch("http://YOUAWESOMEURL", {
        method: "post",
        body: JSON.stringify(body),
    })
        .then((response) => console.log(response))
        .catch((error) => console.log(error));
    await page.goto("https://YOUAWESOMEURL");
    await page.click("button");
    await page.click("text=Login");
    await page.fill("#Username", "YOURUSERNAME");
    await page.fill("#Password", "YOURPASSWORD");
    await page.click("#loginButton");
    // await page.click("css=span >> text=Load Test");
    await page.click(
        "#root > div > div > header > ul.nav.navbar-nav.area-tabs > li:nth-child(6) > a >> text=Test"
    );
    await page.waitForSelector("text=SOMETEXTYOUWANTTOCHECKIFTHERE");
    // await page.waitForSelector(`text=SOMEOTHERTEXTYOUWANTTOCHECKIFTHERE`);
    // Another way to check for success
    // await expect(page).toHaveText(`SOMEOTHERTEXTYOUWANTTOCHECKIFTHERE`);
    console.log("test was successful!");
});

- Isen

---

这就是我想做的，即在测试中发起一个POST请求。这很容易，你只需要在函数内部执行一个fetch操作即可。 - Isen

Answer 2

使用1.19版本看起来很容易。

test('get respons variable form post in Playwright', async ({ request }) => {
  const responsMy= await request.post(`/repos/${USER}/${REPO}/issues`, {
    data: {
      title: '[Bug] report 1',
      body: 'Bug description',
    }
  });
  expect(responsMy.ok()).toBeTruthy();
}

了解更多信息，请访问https://playwright.dev/docs/test-api-testing

- Gaj Julije

Answer 3

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

const baseApiUrl = "https://api.xxx.pro/node-api/graphql";

test('API Search', async ({ request }) => {

        const search_query = `query  {me {  id username}}   `;

        const response = await request.post(baseApiUrl, {
            data: {
                query: search_query
            },
            headers: {
                authorization: `Bearer eyJhbGciOiJIUzcCI6IkpXVCJ9.eyJzd`
            }
        });

        const bodyResponse = (await response.body()).toString();
        expect(response.ok(), `${JSON.stringify(bodyResponse)}`).toBeTruthy();
        expect(response.status()).toBe(200);

        const textResponse = JSON.stringify(bodyResponse);
        expect(textResponse, textResponse).not.toContain('errors');
    });

- mskonst

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community