'How to do a POST Request with PlayWright

I have been stuck with this for a bit. I need to test a website and I need to post info in order to test if it appears on the page.

What I have so far is this

(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 ]


Solution 1:[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!");
});

Solution 2:[2]

With 1.19 version it looks easy.

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();
}

See more on https://playwright.dev/docs/test-api-testing

Solution 3:[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');
    });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tanner
Solution 2 Gaj Julije
Solution 3 mskonst