I'm working in an application that requires these types of login where a new window (no tab) pops up and ask you to login, in the same way that twitter or facebook do (or used to do), where it shows where to put your email and password, click "login" and then the window would close and the main window would receive the authentication and keep going.
I can do it in "headed" mode, when I click the authentication button, the window pops up and I get a grip of it with
const newWindow = (await browser.pages())[1]
and then I'd navigate like normal where in my case I only have to click a single button because I'm already logged in the page I'm trying to use for authentication
await newWindow.waitFor("//SomeXpath")
const buttonToClick= (await newWindow.$x("//SomeXpath"))[0]
await buttonToClick.click()
Again, in headed mode it works fine. but in headless mode is like this 2nd page would not open.
If I try:
console.log(await browser.pages())
I only see the main page where I open puppeteer
I've seen people talking about the "target" class, but it seems is for new tabs, and the examples I've found didn't work for me (or probably I wasn't able to understand and properly use them)
I'm afraid that what I'm trying to do is not possible and I'm chasing a ghost.
Thanks
Edited:
A snapshot of the window with the button I have to click
Snapshot of the new window
Also I've tried this, but it didn't work either:
const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page())));
const popup = await newPagePromise;
where popUp would be the new "page". But if I do a console.log(popup) it returns "null"
Related
I'm navigating with Puppeteer around a React website.
Two sample lines of code:
await page.waitForSelector('a.btn-lg[data-target="#loginModal"]');
await page.click('a.btn-lg[data-target="#loginModal"]');
With a sufficient slowMo value, the effects are consistent - the button gets clicked every time.
However, without slowMo, sometimes the button does get clicked, and sometimes it doesn't (a window wired to it doesn't open).
It happens for a lot of elements, not just this one button in particular.
I just started using Puppeteer, and it looks like I'm either misusing the library, or the website somehow screws up my efforts.
Please tell me why sometimes the effects of clicking are visible and sometimes not, and how to remedy it.
UPDATE:
Code such as this does not work either.
await page.evaluate(() => (document.querySelector('span.pum-close') as any).click());
await page.$$eval('span.pum-close', elements =>
elements[0].click()
);
What I would like to do is open up a web page without it showing, inject javascript into it, and then proceed into my app.
The secondary page is a login page that I need to use but I don't want to show it in my app.
Therefore, I would like to open that page, use it, and most importantly, get the login information back, all without seeing the external login page.
I have my own login page to gather the information and a "login" button to kick it all off.
Here is what I have so far:
login(){
const browser = this.iab.create('https://authn.exampleLoginPage.com/login.aspx', "_blank","hidden=yes,location=no");
browser.executeScript({code:'document.getElementById("uxUserName").value="myUserName"'});
browser.executeScript({code:'document.getElementById("uxPassword").value="myPassword"'})
browser.executeScript({code:'document.getElementById("SubmitCreds").click();'})
.then( (value) => {
console.log("ob2 is ", value);
})
this.nav.setRoot(TabsPage);
}
login() gets called by clicking my login button.
I am testing this in chrome by running ionic serve and I'm encountering a couple problems. First, the code pulls up a new tab with the external website. Second, the javascript doesn't seem to be firing. I never get to the console log in the promise. I don't know what I'm missing here.
In order to automate my test application, I need to open few links in a new window instead of tab. Keep this in mind that I am not opening the links in new tab explicitly, it is my web application which automatically lands user in the new tab after clicking on the link.
Why do I want to do this?
Because running the tests on chrome browser closes the main tab and keeps open the newly opened tab. Which ultimately fails the tests.So ultimate intention is to open the new window instead of tab and handle it properly using driver.getWindowHandles().
What have I done so far?
I tried to find some kind of capability setting or profile in Chrome which automatically opens the links in a new window which are supposed to be open in a tab.But did not find any convincing solution most of the suggestions are CTRL+CLICK ON THE LINK.
I'm not a guru of web-design, but I can suggest following scenario:
// Get required page
// Excecute below JavaScript with JavaScriptExecutor
var reference = document.querySelector('a#someID').getAttribute('href'); // You can use your specific CSS Selector instead of "a#someID"
document.querySelector('a#someID').setAttribute("onclick", "window.open('" + reference + "', '', 'width=800,height=600')")
document.querySelector('a#someID').removeAttribute('href')
// Find target link
// Click on it
This code should allow you to make changes in HTML source code of target web-element to force its opening in new browser window.
Note that with this code element's appearance on page will be changed until page refresh
P.S. You didn't mentioned your programming language, so there is no complete implementation... However, this is Python implementation example:
from selenium import webdriver as web
dr = web.Chrome()
dr.get('https://login.live.com/login.srf?&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1%26realm%3dlogin.live.com')
dr.execute_script("""
var reference = document.querySelector('a#ftrTerms').getAttribute('href');
document.querySelector('a#ftrTerms').setAttribute("onclick", "window.open('" + reference + "', '', 'width=800,height=600')")
document.querySelector('a#ftrTerms').removeAttribute('href')
""")
link = dr.find_element_by_id('ftrTerms')
link.click()
Well, in the absence of any flag/setting/capability in Chrome browser which opens the links in a new window instead of the new tab I used a Chrome Extension for that via WebDriver.
Why did I do that?
Because my tests are running fine on Firefox and I have no idea how many WebElements are there in the suite which gets open in new tab in Chrome browser. The suite is also very huge so doing any changes in its core page class may break the all the tests.In addition to that, changing code at an element level will be very time-consuming and most importantly not a generic solution.
What did I do?
I used a chrome extension New Tab New Window, which opens all the new tabs into a new window.
Downloaded the CRX file of this extension using an extension Get CRX.
Set the CRX file as a capability of Chrome.
ChromeOptions options = new ChromeOptions();
options.addExtensions(new File("pathOfCRXFile"));
DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, options);
WebDriver driver = new ChromeDriver(capabilities);
So above will convert all the new tabs into a new window.So whenever the driver clicks on any link which further opens in a new tab will get opened into the new window.
I have a web page where people can go and design things, let's say furniture layout. There are buttons on the page to save the work, but I don't have any protection if someone just goes up and puts a new URL in the Address bar. Then the browser (say Chrome 34.0) throws out all the current work and loads the new page. How can I force Chrome to open the new URL in a new tab, or at least catch the exit from the current page so I can save the work for the user?
Thanks
You can create a javascript popup that runs when the user has modifyed the work with this line:
window.onbeforeunload = function(){ return 'All unsaved Work will be lost.' }
The popup will look something like this
Confirm Navigation
All unsaved Work will be lost.
Press OK to continue, or Cancel to stay on the current page.
Use this line to prevent the popup once the user saves:
window.onbeforeunload = null;
I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.
The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.
Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.
Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.
As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....
You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.
I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.