Playwright + Firefox: How to disable download prompt and allows it to save by default? - node.js

I'm using Playwright + Firefox to automate downloading of a CSV file from firebase. The download is initiated with a click on the button:
page.click(".table-download-button")
Problem: There's a prompt to download the file (refer to image below). What can I do to accept the download without the prompt? I can't be clicking on the prompt since I am automating it. The same problem is not found in chromium, only firefox! (I have my reasons why firefox is needed)
I have tried: Click on "Do this automatically for files like this from now on", however it doesn't work since once I restart the script the preference has been cleared
My code for the download portion:
const [ download ] = await Promise.all([
page.waitForEvent('download'),
page.click(".table-download-button")
]);
const path = await download.path();
Appreciate your assistance!

You should use expect_download there:
async with page.expect_download() as download_info:
await page.click("a")
path = await download.path()

Related

Do not open Developer Tools when browser opens

When I run my tests, the Developer Tools panel is automatically open. Can I close it using Playwright? I don't need to see it.
If you are using chromium.launch you can disable DevTools from showing with the following config.
const browser = await chromium.launch({
devtools: false
});
More information in the Playwright documentation: https://playwright.dev/docs/api/class-browsertype#browser-type-launch-option-devtools

Is there a way to connect to my existing browser session using playwright

I wish to connect to a website and download some pdf files. The website allows us to view the content only after log in. It asks us to log in using OTP and can't be login at more than 3 devices simultaneously.
I wish to download all the pdf listed. So I previously tried the
python playwright open --save-storage websitename.json
to save the login. But it doesn't work for that specific website.
The website.json file was empty whereas it worked for other websites.
Therefore the only solution I could think of know, is to connect to the current browser, open that website and then download those pdfs.
If you have some solution for this or even some other approach please do inform.
I was also thinking about switching over to puppeteer for the same.
But, I don't know the html parsing using node.js, since I feel using css selectors more comfortable, so I can't switch it.
Playwright is basically same as Puppeteer. So it wouldn't be a problem if you switch between the two.
You can use puppeteer-core or playwright to control your existing browser installation, for example Chrome, and then use the existing user data (Profile) folder to load the specified website login info (cookies, webstorage, etc).
const launchOptions = {
headless: false,
executablePath: '/Applications/Google Chrome/Contents/MacOS/Google Chrome', // For MacOS
// executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe', // For Windows
// executablePath: '/usr/bin/google-chrome' // For Linux
args: [
'--user-data-dir=/Users/username/Library/Application Support/Google/Chrome/', // For MacOS
// '--user-data-dir=%userprofile%\\AppData\\Local\\Chrome\\User Data', // For Windows
// '--profile-directory=Profile 1' // This to select default or specified Profile
]
}
const puppeteer = require('puppeteer-core')
const browser = await puppeteer.launch(launchOptions)
For more details about Playwright's method, you can check this workaround:
https://github.com/microsoft/playwright/issues/1985
To connect to an already running browser (Chrome) session, you can use connect_over_cdp method (added in v1.9 of playwright).
For this, you need to start Chrome in debug mode. Create a desktop shortcut for Chrome and edit Target section of shortcut properties to start it with debug mode. Add --remote-debugging-port=9222 to the target box in shortcut properties so that the target path becomes:
C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
Now start Chrome and check if it is in debug mode. For this open a new tab and paste this url in the address bar: http://localhost:9222/json/version. If you are in debug mode, you should see now a page with a json response, otherwise if you are in "normal" mode, it will say "Page not found" or something similar.
Now in your python script, write following code to connect to chrome instance:
browser = playwright.chromium.connect_over_cdp("http://localhost:9222")
default_context = browser.contexts[0]
page = default_context.pages[0]
Here is the full script code:
# Import the sync_playwright function from the sync_api module of Playwright.
from playwright.sync_api import sync_playwright
# Start a new session with Playwright using the sync_playwright function.
with sync_playwright() as playwright:
# Connect to an existing instance of Chrome using the connect_over_cdp method.
browser = playwright.chromium.connect_over_cdp("http://localhost:9222")
# Retrieve the first context of the browser.
default_context = browser.contexts[0]
# Retrieve the first page in the context.
page = default_context.pages[0]
# Print the title of the page.
print(page.title)
# Print the URL of the page.
print(page.url)

How to catch a download event by export blob document with playwright

My website have a editor page and export button. When i click on export button, page will gather all informations, then generate a pdf file automatically and open in new tab by Chrome Viewver.
The generate link is: blob:https://somecode
I tried to turn off Chrome Viewer and force it download pdf file. However, i cannot catch the download event.
Please guide me how to catch the download file path by Playwright using Nodejs.
Thank you.
You can catch the browser context's "page" event - it's a start, but not the solution, I'm stuck somewhere around that too.

Open "steam://..." link via nodeJS and Chrome

steam provides links to inspect items in 3D by opening the game and the specific 3D model. Such a link looks like this:
steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198808861484A14783070567D17060211998222859457
If this link is clicked in a browser, it asks confirmation to open the "Steam Client Bootstrapper" and then runs the game (or you check a box so it doesn't ask that again).
I would like to make a node script, that would open such a link (probably via chrome) and runs the game.
I tried chrome-launcher:
const chromeLauncher = require('chrome-launcher');
inspect("steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198808861484A14783070567D17060211998222859457")
function inspect(link){
chromeLauncher.launch({
startingUrl: link
}).then(chrome => {
console.log(`Chrome debugging port running on ${chrome.port}`);
});
}
and also the opn module:
const opn = require('opn');
inspect("steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198808861484A14783070567D17060211998222859457")
function inspect(link){
opn(link, {app: 'chrome'});
}
Both of these have the same result:
Chrome opens up
Address bar is empty
Nothing happens
Any idea on how I could do this?
Thanks in advance!
Remove the app parameter so it uses the standard browser.

How to select the file in native os pop using protractor

I am using protractor to automate my website. I have a scenario where need to upload the file clicking on upload button. When clicked on upload button then it renders the native os popup to select the file.
I tried to upload using below code without clicking on upload button.I think this approach is not correct as the user has to click on upload button and then select the file from native os popup.But still no luck
var fileToUpload = 'filePath';
var absolutePath = path.resolve(__dirname, fileToUpload);
element(by.id("creator--add-a-piece-empty")).sendKeys(absolutePath);
How to select the file in native os pop ? Is there any way to upload
Operating system - Mac siera
I have tried all the possible solution provided on How to upload file in angularjs e2e protractor testing But no luck . I have added the code below s ,that will redirect you to the problem page ,where i need to upload the file.Thanks in Advance.
describe('NeonMob', function() {
it('LoginUsingInvalidEmail', function() {
browser.get('https://staging.neonmob.com/login');
element(by.id('form-field-username')).click();
element(by.id('field-username')).sendKeys("sharif");
element(by.id('field-password')).sendKeys("1234");
element(by.id('signin-btn')).click();
element(by.css("a[id='primary-navigation--create']")).click();
element(by.id("create-new-amateur-series")).click();
element(by.id("confirm-btn")).click();
element(by.id("creator--add-a-piece-empty")).click();//to click on Add
});
});
var sitepath = "site-100M.zip";
element(by.css('#siteTemplateUploadFile')).sendKeys("D:/localresources/"+sitepath);
This is my code which works fine.

Resources