We Keep Coding

How can I wait all XHR request to be loaded?

I have a method for our website's search field.When I type a word into search field, server gives me a response.These responses sometimes can be a log so I have to wait for all XHRs to be loaded not a specific response.Tried waitForLoadState seems not working.Tried below code but it only returned one response not other requests?
async searchTextWithWait(value: string) {
await(await this.page.waitForSelector("//span[contains(#class,'search-input')]/input")).type(value,{delay:80})
await this.page.waitForResponse(response => {
return response.status() == 200
});
}

Maybe this solution can help you:
const selector = "//span[contains(#class,'search-input')]/input";
await this.page.locator(selector).waitFor();
await Promise.all([
this.page.waitForLoadState('networkidle'), // wait until there are no network connections for at least 500 ms.
this.page.locator(selector).type(value,{delay:80}),
]);

Javascript fetch requests are empty when starting a session

I have the following simple PHP page:
<?php
echo 'done';
When I send a Javascript fetch request to that URL, I can inspect the response in the browser's dev tools and see that it returns the string 'done'.
Here is the request:
const response = await fetch(url, {
credentials: 'include'
});
On the other hand, if I start a session, the response is blank:
<?php
session_start();
echo 'done';
In both cases, the request headers are exactly the same, the response headers are exactly the same and the HTTP code is 200. It also works correctly if I manually go to that URL in the browser. It only fails specifically with fetch requests.
Note, I have display_errors and display_startup_errors set to On and nothing is outputted to the browser and nothing is logged in the log file either.

This behavior is because of a bug with Chromium that the devs have decided they "WontFix" and have stopped answering comments.
In order to get it to work, you need to manually read response.text() or response.json():
const response = await fetch(url);
const text = await response.text();
Once you do that, the response body will show up in your dev tools. If not, it will appear as if the response was empty, even if it wasn't.

You can use async with Await
Asyn function getData(url){
const response = await fetch(url);
const data = await response.json();
Console.log(data).
}
You can change the .json() to text()

How to check if specific action made a request using playwright?

It's my first time using Playwright and I just can't figure out how to check if a request is made to the server. I want to press a button that sends request and and validate if it was successful or not. I am using chromium from Playwright and making tests with Mocha and Chai. This is my code:
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(url);
await page.click('text=Send');
// Validate if the request is send
await browser.close();
I may be trying to do it wrong, but I don't have much experience with Playwright, so any help will be appreciated.

You can use page.waitForRequest, using the urlOrPredicate parameter to verify that the request matches your expectation.

I'm not sure I have it clear. As I see it, you'd need to make the requests to the API. You can check it in the docs. For example, after clicking the button:
test('api', async({ request }) => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(url);
await page.click('text=Send');
// your api call(s)
const req = await request.YOUR_REQ_METHOD('https://THE_URL_NEEDED');
// your assertion(s)
expect(req.ok()).toBeTruthy();
});
I'd just add, and I'm not saying this is the case, always consider if you need the use of a browser for achieving your goal.

Async Fetch then Close Window

I am trying to use an asynchronous function to perform a POST request. Once this request has been sent, I wish to close the current window. Below is the code I am using.
async function postData() {
const response = await fetch(destinationUrl, fetchOptions);
return response.json();
}
postData().then(window.close());
The parts work individually, but when combined, the request doesn't seem to be sent before the window closes.
How can I make sure the request is sent before closing the window?
I would like to avoid the use of a timeout if possible.

You have to provide a callback to .then:
async function postData() {
const response = await fetch(destinationUrl, fetchOptions);
return response.json();
}
postData().then(() => window.close());
// or more concise:
postData().then(window.close);

Playwright's page.waitForResponse gets wrong response

I'm trying to make assertions on XHR, but can't find a right way on how to grab the correct request.
The task is simple: click a button, then wait for network request and make assertions on it's response and request bodies.
The problem is that before I call changePageSize() function in my tests, there are already multiple requests in my network with the exact same URLs and methods. The only difference between them is request and response body, so it happens that my code just grabs the first request that matches url I provided. Is there an any way on how to specify the exact network request that I want to use in my tests?
Here is the function:
static async changePageSize(selector: string): Promise<any> {
const [resp]: any = await Promise.all([
page.waitForResponse(`**${paths.graph}`),
this.setPagination(selector),
]);
return [resp]
}
And then I'm using it in my tests:
const [response] = await myPage.changePageSize(selector);
expect(await response.text()).toContain(`${size}`);
expect(response.request().postData()).toContain(`${size}`);