How to do a POST Request with PlayWright - post

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 ]

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!");
});

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

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

Related

Get photo from telegram and post to Strapi via Axios

Hi I'm trying to POST image to Strapi via api/uploads with Axios
With code below I have reponse with code 200, but in Strapi UI get file with no image, but with other parameters.
Something like this
return bot.getFileLink(msg.photo[0].file_id).then((resp) => {
axios.get(resp, { responseType: 'buffer' }) // geting img from telegram link
.then(axres => {
const buffer = Buffer.from(axres.data) // make Buffer obj
const imgdata = new formdata()
imgdata.append('files', buffer, { filename: resp }) // append to FormData object
axios.post(`http://localhost:1337/api/upload`, imgdata, {
headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
})
})
})
In docs provided example with FormData in body option, but in this case I have error "Bad request 400"
await fetch('/api/upload', {
method: 'post',
body: new FormData(e.target)
});
Solved. With "binary" endocding in Buffer it works perfect.
return bot.getFileLink(msg.photo[0].file_id).then((resp) => {
axios.get(resp, { responseType: 'arraybuffer' })
.then(axres => {
const buffer = Buffer.from(axres.data, 'binary')
const imgdata = new formdata()
imgdata.append('files', buffer, { filename: resp })
console.log(buffer)
axios.post(`http://localhost:1337/api/upload`, imgdata, {
headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
console.log('ok');
})
.catch(err => {
console.log(err);
})
})
})

Playwright Not able to access foreach variable inside of test

I am using foreach to run the test for multiple users.
I can access the variable from foreach inside of beforeAll, but does not work inside of test
the following line does not get the value as expected, i verified i have value for that column in the .csv
await page.locator('#searchByCode').fill(${user.Code}); // Does not Work , get undefined
import fs from 'fs';
import path from 'path';
import { test, expect, Page } from '#playwright/test';
import { parse } from 'csv-parse/sync'; //requires https://www.npmjs.com/package/csv-parse
const users = parse(fs.readFileSync(path.join(__dirname, '../users.csv')), {
columns: true,
skip_empty_lines: true
});
//Want test inside of describe to run in serial mode
test.describe.configure({ mode: 'serial' });
test.use({ viewport: { width: 600, height: 900 } }); //Affects all Tests
let page: Page;
users.forEach(user => {
console.log(user.Email);
test.describe(`Login for user ${user.Email}`, () => {
test.beforeAll(async ({ browser }) => {
// Create page once and sign in.
page = await browser.newPage();
await page.goto('https://XXXXXXX.com');
await page.fill("#logInEmail",`${user.Email}`); **//This one works**
//find password text(#loginInPassword) and enter password
await page.fill('#loginInPassword', `${user.Password}`); **//This one works**
await Promise.all([
page.waitForNavigation(/*{ url: 'https://getinline.net/' }*/),
page.locator('#loginSignIn').click()
]);
});
test.afterAll(async () => {
await page.close();
});
test('SearchBusinessByCode', async ({ browser }, testInfo) => {
await page.locator('#searchByCode').fill(`${user.Password}`); **// Does not Work , get undefined**
await page.locator('button', { hasText: 'Search' }).click();
});
});
}); //forEach

How to send parallel POST requests in puppeteer?

I want to send parallel POST requests in puppeteer. I have to change the payload with every request (URL remains the same).
I tried using puppeteer cluster, but how do I change payload with every request when I queue the same request?
Using normal puppeteer
(async() => {
const browser = await puppeteer.launch({
args: [
"--no-sandbox",
"--disable-setuid-sandbox",
"--disable-web-security",
],
executablePath: 'C:/Program Files/..',
headless: false,
});
for(const id of Ids) {
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(60000);
await page.evaluateOnNewDocument(() => {
// Some code
})
await page.setRequestInterception(true);
// Request intercept handler... will be triggered with
// each page.goto() statement
page.on('request', interceptedRequest => {
// Here, is where you change the request method and
// add your post data
var data = {
'method': 'POST',
'postData': JSON.stringify({
....
"similarMaterialId": `${id}`,
}),
'headers': {
.....
},
};
// Request modified... finish sending!
interceptedRequest.continue(data);
});
const response = await page.goto('https://.../getProductInfo');
const responseBody = await response.json();
try {
let title = responseBody.description;
let price = responseBody.price;
fs.appendFile('temp.tsv', `${title}\t${price}\n`, function (err) {
if (err) throw err;
})
}
catch {
console.log(id)
}
await page.close();
}
console.log("Code ended!!")
await browser.close();
})();
I want to create many pages in parallel on a single browser.

Disable Javascript in Playwright

Is it possible to define a browser with Javascript disabled to simulate how a crawler would view a page? There should be an option that can be passed.
You can pass javaScriptEnabled in the BrowserContext options:
const playwright = require("playwright");
(async () => {
const browser = await playwright.chromium.launch();
const context = await browser.newContext({
javaScriptEnabled: false
});
const page = await context.newPage();
// ...
await browser.close();
})();
In the case of #playwright/test (where you don't define browser.newContext yourself) you can set javaScriptEnabled in testOptions.
(1) In the playwright.config.js file:
const config = {
use: {
headless: false,
javaScriptEnabled: false
},
};
module.exports = config;
(2) or with test.use:
const { test, expect } = require('#playwright/test');
test.use({ javaScriptEnabled: false });
test('website without JavaScript', async ({ page }) => {
// ...
});

Using puppeteer, on TimeoutError screenshot the current state

I'm trying to screenshot a website using puppeteer, and on slow sites I receive a TimeoutError.
In this case, I'd like to get the screenshot of the current page state - is this possible? if so, how?
Code sample:
const puppeteer = require('puppeteer');
let url = "http://...";
let timeout = 30000;
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page
.goto(url, {waitUntil: 'load', timeout: timeout}).then(async () => {
await page
.screenshot({path: 'example.png'})
.catch(error => console.error(error));
})
.catch(error => {
if (error.name === "TimeoutError") {
// -----> calling await page.screenshot({path: 'example.png'}) gets stuck
} else {
console.error(error);
}
});
await browser.close();
})();
Don't use browser.close when using puppeteer in development, as this may cause the browser closed and puppeteer crashed.
const puppeteer = require('puppeteer')
let url = "https://www.tokopedia.com"
let filename = 'timeout.png'
let timeoutNum = 30000
;(async () => {
const browser = await puppeteer.launch({
headless: false
});
const [page] = await browser.pages ()
page.setViewport ({ width: 1366, height: 768 })
try {
await page.goto(url, {waitUntil: 'networkidle0', timeout: timeoutNum}).then(async () => {
await page.screenshot({ path: 'example.png', fullPage: true })
})
} catch (error) {
if (error.name === "TimeoutError") {
console.log (error.name)
console.log (`Screenshot saved as ${filename}`)
await page.screenshot({ path: filename, fullPage: true })
} else {
console.log (error)
}
}
})()

Resources