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.
Related
so I'm trying to get an input element from Twitter but when I run it, it keeps giving me an error like this in the node terminal, as a result, a browser window made from this code will close itself because it doesn't find the right input selector. how do I grab the right kind of input?
Error: No element found for selector: input[name="text"]
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false,
})
const page = await browser.newPage();
page.setViewport({
width: 1280,
height: 800,
isMobile: false
})
await page.goto("https://twitter.com/i/flow/login");
await page.type('input[name="text"]', 'username', {delay: 25})
})();
i tried different selectors including class attribute but still gets error
you need to waitForSelector to appear on the page before typing. That is why you got an error, it couldn't find the element.
await page.waitForSelector('input[name="text"]');
await page.type('input[name="text"]', 'username', {delay: 25})
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()
})()
I originally wanted to launch a Puppeteer instance for each unique profile I had. I managed to figure this out but a new problem has come up. Basically, in one point of my script I tell the browser to close the tab and reopen a new one. It closes each tab in each individual browser fine but when I use await browser.newPage(); it sends all the new tabs to just one browser (which I'm guessing was the last browser opened) instead of staying in their respective browser.
const puppeteer = require('puppeteer-extra');
const fs = require('fs');
const botRun = async emailInfo => {
browser = await puppeteer.launch({
args: [],
headless: false,
ignoreHTTPSErrors: true,
slowMo: 5,
});
const page = await browser.newPage();
await page.waitForTimeout(2500)
// do stuff with emailInfo
await page.close(); // works fine - will close tab for each browser
await browser.newPage(); // suddenly sends all tabs to 1 browser
};
(async () => {
const profile = JSON.parse(fs.readFileSync("./settings.json"));
await Promise.all(profile.map(({email}) => botRun(email)));
})();
settings.json looks like:
[
{"email": "email1#gmail.com"},
{"email": "email2#gmail.com"},
{"email": "email3#gmail.com"}
]
Is there any workaround for this?
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"]');
}
)();
Is it somehow possible to set the browsers (Chrome[ium]) window size like the viewport size?
Setting only the viewport results in a unhandy appearance when the browser is not running headfully and I want to visually see what's going on within the browser instance.
So I would like something like below:
const browser = await puppeteer.launch({
headless: false, // The browser is visible
ignoreHTTPSErrors: true
}),
page = await browser.newPage();
// This is well explained in the API
await page.setViewport({
width: options.width,
height: options.height
});
// But is there something like this (careful this is dummy code)
browser.setWindowSize({
width: options.width,
height: options.height
});
Thanks for any help pointing me into the right direction
You can set chrome window size during puppeteer.launch with flag --window-size
Here is usage in your example:
const browser = await puppeteer.launch({
headless: false, // The browser is visible
ignoreHTTPSErrors: true,
args: [`--window-size=${options.width},${options.height}`] // new option
});
This resizes the window and the view area
const browser = await puppeteer.launch({
headless: true,
ignoreHTTPSErrors: true,
args: [`--window-size=1920,1080`],
defaultViewport: {
width:1920,
height:1080
}
});
If you want it to behave like a normal browser where it resizes the viewport to the window size. Then set the viewport to null
const browser = await puppeteer.launch(
{
defaultViewport: null,
headless: false
});
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--start-maximized'], // we can use '--start-fullscreen' || --start-maximized
});