I am new to Puppeteer and am trying to run the example script. However, I get a blank chromium window (with no tab or URL bar).
Environment details:
OS: Windows 10
Node version: 8.4.0
NPM version: 6.4.1
I installed puppeteer using NPM and version 1.0.0 got installed. I also installed version 1.9.0 directly from Puppeteer's github page. Both versions have a similar issue.
This is my script:
const puppeteer = require('puppeteer');
(async () => {
try {
console.log('starting');
const browser = await puppeteer.launch({
executablePath: 'D:/Code/Puppeteer/node_modules/puppeteer/.local-chromium/win64-594312/chrome-win/chrome.exe',
headless: false
});
console.log('one');
const page = await browser.newPage();
console.log('two');
await page.goto('https://github.com');
console.log('three');
await page.screenshot({path: 'example.png'});
console.log("Page is up");
await browser.close();
}
catch (e) {
console.log("Error: ", e);
}
})();
In above script, I can see 'starting' and then Chromium window opens with nothing on screen. When I press F12 to bring up the dev tool, I see 'one' being printed on screen.
I have set environment variable 'path' to use this:
D:\Code\Puppeteer\node_modules\puppeteer\.local-chromium\win64-594312\chrome-win; C:\Program Files (x86)\Google\Chrome\Application
The puppeteer script is working now. I started the node.js cmd window in admin mode to run the script which did not work. Running in normal mode worked.
Related
I am unable to use specific profile in Puppeteer. It always open the chrome as a new user.
For example: I have 3 profiles for my chrome. Following is the code I am using to open chrome in specific profile:
const browser = await puppeteer.launch({
headless: false,
executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
// args: ['--profile-directory="Profile 1"'],
userDataDir:"C:\\Users\\USER_NAME\\AppData\\Local\\Google\\Chrome\\User Data\\Profile 1"
});
But it always open the chrome as "Current user" profile.
Try below code:
const browser = await puppeteer.launch({headless:false, args:[
'--user-data-dir=/user/data/directory/profile_n']
});
Full explanation is given here:
In Puppeteer how to switch to chrome window from default profile to desired profile
Nowadays this should work with:
args: ['--profile-directory="Profile 1"'],
userDataDir:"C:\\Users\\USER_NAME\\AppData\\Local\\Google\\Chrome\\User Data"
I want to run a basic script that takes a screenshot of the tv schedule each day on a specific url, the url in question has a cookies pop up that requests to be accepted before the rest of the page is displayed, this obviously gets in the way of my intended screenshot, a similar post (Pupeteer - how can I accept cookie consent prompts automatically for any URL?) had a solution that suggested to download the chrome extension 'I don't care about cookies' and then run puppeteer with google chrome with this extension installed, I have installed the extension and ran puppeteer with chrome but the extension does not seem to show up in the chrome window that puppeteer creates, how do I fix this so the extension is there when I run chrome using puppeteer? note: I am intentionally using regular chrome not chromium for this reason, chromium does not allow extensions with puppeteer.
my code:
const puppeteer = require('puppeteer-core')
async function main() {
const browser = await puppeteer.launch({
headless: false,
slowMo:10,
executablePath: '/Applications/Google
Chrome.app/Contents/MacOS/Google Chrome',
args: [
'--disable-extensions-except=/Applications/Google
Chrome.app/Contents/MacOS/Google Chrome',
'--load-extension=/Applications/Google
Chrome.app/Contents/MacOS/Google Chrome',
]
});
const page = await browser.newPage()
await page.setViewport({
width: 980,
height: 480,
deviceScaleFactor: 2,
});
await
page.goto("https://www.tvguide.co.uk/mobile/channellisting.asp?
ch=145#588622936")
await page.waitForTimeout(15000); // wait for 15 seconds
await browser.close()
}
main();
Any reply would be greatly appreciated. Many Thanks.
I am currently working on a GitLab CI test environment and I have a test harness which we use to test our SDK. I have gone about setting up a custom event that is fired on the page which designates the end of the test run. In my puppeteer implementation I am wanting to listen for this custom event "TEST_COMPLETE".
I have not been successful in getting this to work so I figured I would at least make sure the custom-event.js example on the puppeteer repo worked and there too I am not seeing what I believe I should be getting. I cloned the main repo below and performed an npm install. When I execute the js test below, setting headless:false and don't close the browser, I do not see any log in console that shows any custom event being fired.
It is my understanding that I should see some console event message with 'fired' and then 'app-ready' event and info, but this is not the case. Even if I interact with the page I don't see anything outside of some 'features_loaded' and 'features_unveil' logs.
https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js
Anyone able to get the expected behavior on this code today? Not sure if this worked previously and has broke since or I am just doing something wrong. Any info would be of great help, Thanks!
Not sure if this is what you need, but I can get the message 'TEST_COMPLETE fired.' in Node.js console with this simplified code (puppeteer 8.0.0):
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const [page] = await browser.pages();
await page.goto('https://example.org/');
await page.exposeFunction('onCustomEvent', async (type) => {
console.log(`${type} fired.`);
await browser.close();
});
await page.evaluate(() => {
document.addEventListener('TEST_COMPLETE', (e) => {
window.onCustomEvent('TEST_COMPLETE');
});
document.dispatchEvent(new Event('TEST_COMPLETE'));
});
} catch (err) { console.error(err); }
I'm trying to get the browser version in Protractor using this code:
let actualCapabilities = await browser.getCapabilities();
console.log("Browser Name: " + actualCapabilities.get('browserName'));
console.log("Browser Version: " + actualCapabilities.get('browserVersion'));
For Firefox it works fine:
Browser Name: firefox
Browser Version: 62.0
But for Chrome it shows undefined in the browser version:
Browser Name: chrome
Browser Version: undefined
Is this not possible for Chrome?
For me works this one:
onPrepare: async () => {
await browser.waitForAngularEnabled(false);
const capabilities = await browser.getCapabilities();
console.log(capabilities.get('version'));
it could be helpful to look at entire capabilities Map Object and find what you need:
onPrepare: async () => {
await browser.waitForAngularEnabled(false);
const capabilities = await browser.getCapabilities();
console.log(capabilities);
Thank you, there is the solution. Then for Chrome we should use
actualCapabilities.get('version')
and for Firefox
actualCapabilities.get('browserVersion')
I am trying to use Headless Chrome to generate a PDF file from a complex HTML file (contains images, SVGs, etc.). I am able to use wkhtmltopdf.exe on Cloud Service (Windows) to generate simple PDF file, but I really need Chrome to produce PDFs as close as possible to the HTML + SVG + Image.
I was hoping to be able to run Headless Chrome in Azure Cloud Service or Azure Functions, but I cannot get it to work. I suppose this is due to restrictions on GDI. I was able to run my code and Headless Chrome in the Azure Emulator on my own machine, but once it is deployed nothing works.
Below is the code I am currently running in Azure Functions (for Windows). I am using Puppeteer to take a screenshot of example.com. If I can get this to work, I suppose that generating PDF will become easy.
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const os = require('os');
module.exports = function (context, req) {
function failureCallback(error) {
context.log("--> Failure = '" + error + "'");
}
const chromeDir = path.normalize(__dirname + "/../node_modules/puppeteer/.local-chromium/win64-508693/chrome-win32/chrome.exe");
context.log("--> Chrome Path = " + chromeDir);
const dir = path.join(os.tmpdir(), '/screenshots');
if (!fs.existsSync(dir)){
fs.mkdirSync(dir);
}
const screenshotPath = path.join(dir, "example.png");
context.log("--> Path = " + screenshotPath);
let browser, page;
puppeteer.launch({ executablePath: chromeDir, headless: true, args: [ '--no-sandbox', '--single-process', '--disable-gpu' ] })
.then(b => {
context.log("----> 1");
browser = b;
return browser.newPage();
}, failureCallback)
.then(p => {
context.log("----> 2");
page = p;
return p.goto('https://www.example.com');
}, failureCallback)
.then(response => {
context.log("----> 3");
return page.screenshot({path: screenshotPath, fullPage: true});
}, failureCallback)
.then(r => {
browser.close();
context.res = {
body: "Done!"
};
context.done();
}, failureCallback);
};
Below is the log when trying to execute the script.
2017-12-18T04:32:05 Welcome, you are now connected to log-streaming service.
2017-12-18T04:33:05 No new trace in the past 1 min(s).
2017-12-18T04:33:11.400 Function started (Id=89b31468-8a5d-43cd-832f-b641216dffc0)
2017-12-18T04:33:20.578 JavaScript HTTP trigger function processed a request.
2017-12-18T04:33:20.578 --> Chrome Path D:\home\site\wwwroot\node_modules\puppeteer\.local-chromium\win64-508693\chrome-win32\chrome.exe
2017-12-18T04:33:20.578 --> Path = D:\local\Temp\screenshots\example.png
2017-12-18T04:33:20.965 --> Failure = 'Error: spawn UNKNOWN'
2017-12-18T04:33:20.965 ----> 2
The error "Failure = 'Error: spawn UNKNOWN'" is not clear. I made sure that the path I am using is correct using Kudu and PowerShell.
I am looking for a way to run Chrome on Azure Cloud Service and/or Azure Functions (for Windows - in order to use my existing App Service plan). Anybody has also attempted to run Headless Chrome in Azure? I am open to any ideas which would help me to get this script to work?
I would recommend to use https://www.browserless.io/ so you don't have to run the chrome.exe in the app service.
Replace puppeteer.launch with puppeteer.connect
const browser = await puppeteer.connect({
browserWSEndpoint: 'wss://chrome.browserless.io/'
});
I'm not sure about the usage of Headless Chrome, but the sandbox that Azure Functions runs in has problems generating PDFs from HTML due to some GDI restrictions.
Consider trying your task in Azure Functions on Linux. While this is still in preview, it does not utilize a sandbox, so if you can get headless chrome working on it then you may have more luck with the PDF generation.
Azure allows NodeJS:
you can do it in NodeJS using Phantom (instead of chrome since you wont have access to any browsers - nor will you be able to run them on azure web apps) see the example - its in hosted on google firebase but you can easily apply it to your NodeJS project:
https://stackoverflow.com/a/51828577/6306638
IIS server on a Azure VM is your only alternative if you NEED Chrome.
Let me know if you need any help with this!