Do not open Developer Tools when browser opens - node.js

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

Related

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)

Web Bluetooth & Chrome Extension: User cancelled the requestDevice() chooser

I'm getting the following error when trying to open the Web Bluetooth device selector dialog from a Google Chrome extension popup:
DOMException: User cancelled the requestDevice() chooser.
I'm using TypeScript and browserify with ES2020 target, module and lib. Here is the code that runs from my popup.html
document.getElementById("test-button")?.addEventListener("click", async () => {
await navigator.bluetooth
.requestDevice({ acceptAllDevices: true })
.then((device) => {
alert(device.name);
})
.catch((error) => {
console.error(error); // <- Getting the error here!
});
});
I'm assuming there's some Chrome extension magic that tricks the web-bluetooth into thinking that I clicked away from the dialog, but have no idea how to get around this. Any idea?
As discussed in https://bugs.chromium.org/p/chromium/issues/detail?id=994185, Web Bluetooth is NOT supported in Chrome Extensions popup windows.
It is supported however in a Chrome Extension "tab/options" page as it acts as a regular tab.
I haven't tried to reproduce this yet but I believe the issue is that Web Bluetooth doesn't have code to handle creating a permission prompt as a child of an extension popup window. It works for the options page because it is a normal Chrome tab and would also work for a standalone app window.
My suggestion would be to open a Chrome Extension regular page that contains some code to interact with nearby Bluetooth devices.
// popup.js
button.addEventListener("click", function() {
// Open a page that contains Javascript to handle Bluetooth devices.
chrome.tabs.create({ url: "page.html" });
});

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

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()

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.

Create new tab with developer tools open

I have a working Chrome Extension that opens a new tab and navigates to the specified URL. I'm looking to see if I can somehow have that new tab be opened with developer tools open as well. Is this possible?
chrome.tabs.create({
active: true,
url: "http://www.google.com"
}, createTabListener);
Unfortunately, it is not possible at the moment. You can vote for this issue to support the feature request: https://code.google.com/p/chromium/issues/detail?id=410958

Resources