We Keep Coding

Disabling "Save As" prompt while automating in Puppeteer JS

I am automating some image downloads using puppeteer Js.
While I am triggering the download button it shows the save As prompt window.
is there any way to disable it or accept it using puppeteer?

Check the below code.
Before clicking the Download Button, We can set the Download Behaviour of the Client when launching the Browser Instance. This way you don't have to click on the Save As button.
await page._client.send("Page.setDownloadBehavior", {
behavior: "allow",
downloadPath: downloadPath,
});
Here is the Complete code:
const puppeteer = require("puppeteer");
const path = require("path");
const downloadPath = path.resolve("./download");
async function fileDownload() {
const browser = await puppeteer.launch({
headless: false,
});
const page = await browser.newPage();
await page.goto("https://unsplash.com/photos/_jHJce5uI7I", {
waitUntil: "networkidle2",
});
await page._client.send("Page.setDownloadBehavior", {
behavior: "allow",
downloadPath: downloadPath,
});
await page.click(".wl5gA ");
}
fileDownload();
It creates a directory called download based on the path I have given.

How to handle "accept cookies"?

I am trying to make a scraper that gets the reviews for hotel on tripadvisor.com. I was just working with pagination and testing if the browser would go all the way to the end, where there is no more pages.
Here is my code so far:
const puppeteer = require("puppeteer");
const cheerio = require("cheerio");
async function main() {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://www.tripadvisor.com/Hotels-g298656-Ankara-Hotels.html');
while(true) {
await page.click('a[class="nav next ui_button primary"]');
await page.waitForNavigation({waitUntil: 'networkidle0'});
}
}
main();
However, this stops when the 'accept cookies' popup appears. How can I handle this?

How do I open a new window page from a button in Puppeteer?

I'm trying to open a new window page from a button in Puppeteer.
An example given: I'm logging to a website and the moment I click the button for the login a new fresh window page will pop-up, redirecting to the site the button is meant to be going. How can I do it?

You can do that by simply pressing Shift button while doing page.click
And to catch the newly opened window you can use waitForTarget.
const puppeteer = require('puppeteer')
;(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
})
const context = browser.defaultBrowserContext()
const page = (await context.pages())[0]
await page.goto('https://www.amazon.com/gp/product/B093GQSVPX/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1', {waitUntil: 'load'})
await page.waitForSelector('a[title="Add to List"]', {visible: true})
await page.keyboard.down('Shift')
await page.click('a[title="Add to List"]')
await page.keyboard.up('Shift')
const popup = await browser.waitForTarget(
(target) => target.url().includes('www.amazon.com/ap/signin')
)
const popupPage = await popup.page()
await popupPage.waitForSelector('a.a-link-expander[role="button"]')
await popupPage.click('a.a-link-expander[role="button"]')
await popupPage.click('input#continue[type="submit"]')
await browser.close()
})()

When I start puppeteer, the window has an empty white border

when I start puppeteer, I get a really weird empty border. The whole thing looks like this:
Is there a way to get the empty border away, or is this normal?

Try using defaultViewport: null,
You can use the default page opened by puppeteer, like this:
async function launchBrowser() {
const browser = await puppeteer.launch({
headless: false,
executablePath: process.env.CHROMIUM_PATH,
defaultViewport: null,
ignoreHTTPSErrors: true
});
return browser;
}
const browser = await launchBrowser()
const defaultPages = await browser.pages()
const page = defaultPages[0]
await page.goto('https://www.google.com.my/')
Here the window will also be having only one tab and not that empty tab.

Node using test for UI login

I use the following blog to use the playright
login and I need something similar to use for my app, when I use the headless:flase
I see it opens the UI with the user password in however, it doesnt click on the logon button, I adopt the code I try with the following , am I missing something?
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://app.com');
await page.fill('input[type="text"]', 'user#test.com');
await page.fill('input[type="password"]', 'Abcd1234!');
// page.click('div[data-testid="LoginForm_Login_Button"]');
page.click('div[id="logOnFormSubmit"]');
}
)();

You are currently using
page.click('div[id="logOnFormSubmit"]');
There is no div in your given code example with that ID, but instead there is a button. You'd need to change that line to reflect this. The final code would look like below.
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://app.com');
await page.fill('input[type="text"]', 'user#test.com');
await page.fill('input[type="password"]', 'Abcd1234!');
// page.click('div[data-testid="LoginForm_Login_Button"]');
page.click('button[id="logOnFormSubmit"]');
}
)();