I am trying to play the video in full screen with the code below but it only works when the headless argument is set to false which means it cannot work on headless mode
Here is the code trying to play the youtube video on full-screen mode
The code below does click the full-screen button but the video still not playing in full-screen
const browser = await puppeteer.launch(
{
executablePath: '/usr/bin/chromium',
headless: true,
args: ['--start-maximized', '--proxy-server=127.0.0.1:1080'],
userDataDir: './userData',
ignoreDefaultArgs: ["--enable-automation"]
})
const page = await browser.newPage()
let currentScreen = await page.evaluate(() => {
return {
width: window.screen.availWidth,
height: window.screen.availHeight,
deviceScaleFactor: 1
};
});
await page.setViewport(currentScreen);
await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.79 Safari/537.36')
await page.goto('https://www.youtube.com/watch?v=HS2nNhqnKcQ');
await page.hover('.ytp-fullscreen-button')
await page.waitForTimeout(500)
await page.click('.ytp-fullscreen-button')
await page.screenshot({path: 'youtube.png'})
by the way, it cannot play video in full-screen on pornhub.com too
Here is the answer, simply just change the headless: true to headless: 'chrome'
https://github.com/puppeteer/puppeteer/issues/8819#issuecomment-1223667718
Related
I have an application in which I have to generate PDF for report but I am facing issue in creating PDF
As I want my PDF to look good and I don't know height of my PDF content so when I create PDF it breaks pages at wrong place
So is there any way to create full PDF in one Page only so that it want break on any other place
I have added my code below
const reportDetailHTML = await this.getHTML("report-detail.html", {
...
});
const sectionHTML = await this.getHTML(
"section-divider.html",
{
...
}
);
const browser = await puppeteer.launch({
args: ["--font-render-hinting=none", "--force-color-profile=srgb"],
headless: true,
});
const page: any = await browser.newPage();
await page.setUserAgent(
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
);
await page.setContent(reportDetailHTML + sectionHTML, {
waitUntil: "networkidle0",
});
let height = await page.evaluate(
() => document.documentElement.offsetHeight
);
console.log(height);
await page.waitForNetworkIdle();
await page.evaluateHandle("document.fonts.ready");
await page.emulateMediaType("screen");
const pdf = await page.pdf({
printBackground: true,
margin: "none",
format:"A4",
height,
});
writeFile("./report.pdf", pdf, {}, (err) => {
if (err) {
return console.error("error");
}
console.log("success!");
});
await browser.close();`
So is there any way to create full PDF in one Page only so that it want break on any other place
This is code
const browser = await puppeteer.launch({
headless: false,
timeout: 0,
defaultViewport: null,
args: [
"--no-sandbox",
"--disable-setuid-sandbox",
"--start-maximized",
"--ignore-certificate-errors",
],
ignoreDefaultArgs: ["--enable-automation"],
});
const page = await browser.newPage();
await page.setUserAgent(
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
);
// set download path
const client = await page.target().createCDPSession();
await client.send("Page.setDownloadBehavior", {
behavior: "allow",
downloadPath: "D:\\Download",
});
// open uri
await page.goto(
"https://translate.google.com.hk/?hl=zh-CN&sourceid=cnhp&sl=en&tl=zh-CN&op=docs",
{
waitUntil: "networkidle2",
}
);
// upload pdf docuemnt
const [fileChooser] = await Promise.all([
page.waitForFileChooser(),
page.click("label"),
]);
await fileChooser.accept(["D:\\test.pdf"]);
// click translate button
const button = await page.waitForSelector(
"div[jsname='itaskb'] > div > button"
);
await button.evaluate((b) => b.click());
// click download button
const button2 = await page.waitForSelector(
"div[jsname='itaskb'] > button",
{
visible: true,
timeout: 0,
}
);
await button2.evaluate((b) => b.click());
The whole process is the same as my manual operation. But the translated document after download is not zh-CN, but the same as the uploaded document, which is en.
What happened? How do I proceed to get the translation I want.
I use my own browser to get the result page I want. Everything is correct. Page link is below.
https://parcelsapp.com/en/tracking/016-35294405
img for working
I want to use puppeteer to help me to load the result page. The page shows differently.
I use options headless=false to debug. I found the browser pop up from puppeteer can not load the url correctly. I guess it is because the different environments. How can I solve the problem? Thank you.
img for not working
My code is below:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false,
slowMo: 250, // slow down by 250ms
executablePath: '/usr/bin/google-chrome-stable',
});
const page = await browser.newPage();
await page.on("request", (request) => {
request.abort();
});
await page.goto('https://parcelsapp.com/en/tracking/016-35294405');
await page.waitForNavigation()
await page.screenshot({ path: 'result.png' });
await browser.close();
})();
I need puppeteer (not in headless mode) to open a page and have flash enabled from the get go.
Meaning no manual downloading or clicking to run flash.
So far i've added puppeteer-extra and its flash plugin as was used in a prior question:
Allowing to run Flash on all sites in Puppeteer
My chrome version is 75.0.3770.142 and my puppeteer dependencies are:
* "puppeteer": "^1.19.0",
* "puppeteer-core": "^1.19.0",
* "puppeteer-extra": "^2.1.3",
* "puppeteer-extra-plugin-flash": "^2.1.3",
* "puppeteer-extra-plugin-user-data-dir": "^2.1.2",
* "puppeteer-extra-plugin-user-preferences": "^2.1.2",
import puppeteer from 'puppeteer';
import PuppeteerCore from 'puppeteer-core';
import PuppeteerExtra from 'puppeteer-extra';
import PuppeteerFlash from 'puppeteer-extra-plugin-flash';
PuppeteerExtra.use(PuppeteerFlash());
(async () => {
const browser = await PuppeteerExtra.launch({
headless: false,
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome',
args: [
'--window-size=800,600',
'--enable-webgl',
'--enable-accelerated-2d-canvas',
],
});
const page = await browser.newPage();
await page.setViewport({ width: 800, height: 600 });
await page.goto('http://ultrasounds.com', { waitUntil: 'networkidle2' });
})();
I expected the above code to open the page, download the necessary flash and run the flash content when done.
As it is though, it does the download but still requires a user to click enable flash to make the content run.
I'm wondering if anyone could please let me know if I'm doing anything wrong in the above code, if I've misunderstood something or otherwise?
if you use the localPath chrome app, you needn't the puppeteer-extra-plugin-flash.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
ignoreHTTPSErrors: true,
headless: false,
});
const page = await browser.newPage();
await page.goto('https://v.qq.com/iframe/preview.html?width=500&height=375&auto=0&vid=a30198lw6j2');
const dimensions = await page.evaluate(() => {
return {
src: document.getElementById('tenvideo_video_player_0').getAttribute('src'),
};
});
console.log('Dimensions:', dimensions);
await browser.close();
})();
Even though most of the process of my end-to-end test with puppeteer works fine ( which is a rather simply a series of page.select/type/waitfor/etc) the UI seems skewed.
When the process is over, at the very end of it the UI readjusts to what it should look like but only after everything has concluded. I tried firing up a plain Chromium instance and it looks as it should be as well.
test code looks like so
beforeAll(async () => {
browser = await puppeteer.launch(
{
headless: false,
slowMo: 250,
}
)
page = await browser.newPage()
await page.goto('http://localhost:3000/');
})
describe('on page load', () => {
test('MessageLists loads', async () => {
await page.waitForSelector('.MessageList', { timeout: 3000 })
await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
},
16000
);
test('Post Question', async () => {
await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
await page.focus('.input');
await page.keyboard.type('test');
await page.$('.AnswerList');
await page.screenshot({ path: 'screenshot1.png' });
}, 20000)
})
afterAll(() => {
// browser.close()
})
Im on MacOS Mojave 10.14 though i imagine this isnt the culprit here.
Even if you launch puppeteer in headless: false mode, the page will be run with a given viewport. By default that viewport size is 800x600. If you resize the window to something bigger it might indeed look like the page is run inside an iframe. You cannot resize the viewport by resizing the browser window. You have to rely on functions for that.
Code sample
To change the default viewport, you can add an argument when calling puppeteer.launch:
const browser = await puppeteer.launch({
defaultViewport: { // example: 1600x800
width: 1600,
height: 800
},
headless: false,
slowMo: 250,
})
You can also change it by calling the function page.setViewport.