We Keep Coding

How to switch to the newly opened window using nodejs puppeteer?

I am having some difficulty getting puppeteer to switch its focus to the newly opened window.
The following is what my program is trying to do:
I am trying to use puppeteer to interact with Google Tag Manager preview window but I can't get it to interact with the newly opened window after clicking the submit button.
My puppeteer code is doing the following (please see screenshots below for more details):
go to https://tagassistant.google.com/#!#source=TAG_MANAGER&id=GTM-XXXXX&gtm_auth=kALKj04OP-SpPs2dMA70Tw&gtm_preview=env-562&cb=428326580326923
fill in the hostname to preview e.g. https://www.theage.com.au
click Start button
click on a menu item on the newly opened window (https://www.theage.com.au)
Puppeteer successfully perform up to step 3, however it failed at step 4 because (my first theory of the cause) its focus is still on the current window (if you do it manually on the browser, after clicking the start button, another window of the test site e.g. www.loreal.com.au will be opened).
My second theory of the cause: I also suspect it does not successfully click on the Start button because when I tried to take screenshot of puppeteer action, I can see the start button is grayed out even though the test hostname has been filled so I had to overcome that by telling it to manipulate the DOM attribute of the button to remove the "disabled" to make the button clickable. However, I'm not exactly sure if it successfully clicks through or not.
Could someone show me how to switch puppeteer focus to the newly opened window?
Thank you.
enter image description here

You haven't shown any code, so it's hard to pinpoint where the problem is. But in general, you might want to wait for popup event:
const waitForWindow = new Promise(resolve => page.on('popup', resolve));
await page.click('.my-link');
const newPage = await waitForWindow;
// now I can interact with the new page
const linksInnerTexts = await newPage.$$eval('a', links => links.map(l => l.innerText));
This is a working example if your link has target="_blank" attribute, which opens a new page in a new tab. It also works if your link looks somthing like target="popup" onclick="window.open('../html-link.htm','name','width=600,height=400'), which opens a page in a new window.

Thanks guys,
I have managed to get it working using the targetcreated event.
browser.on('targetcreated', async (target) => { //This block intercepts all new events
if (target.type() === 'page') { // if it tab/page
//const page = await target.page(); // declare it
const page = await target.page(); // declare it
const url = page.url(); // example, look at her url
console.log('***** ' + url);
//.....
}
});

Puppeteer sometimes clicks the wrong element

I'm using puppeteer and I Have only two click like:
await page.click('span[data-href="' + XXX + '"]');
var [button] = await page.$x("//span[contains(., 'Upload Picture')]");
await button.click();
I'm using headless:true, and I can see that sometimes the automation click on the other button or dropdown.
It's a problem because the click can open a modal or sometimes open a new tab and my flow is stopped.

Click on "onclick"-login-button using Puppeteer

I'm experiencing difficulties using Puppeteer to automate a login for a webside that uses an "onclick" script to pop-up it's login window. The login-link looks like this:
<li>
Login
<span class="blu">oder</span>
Registrieren
</li>
Unfortunately the page doesn't offer a login prompt that enables to address the login fields by its ID directly like shown in many puppeteer-examples. There is only the possibility to login using this pop-up window.
I tried many different approaches to get this login prompt opened up like:
(await page.$$eval(selector, a => a.filter(a => a.textContent === 'Login')))[0].click();
or
let selector = 'a';
page.$$eval(selector, anchors => {
anchors.map(anchor => {
if(anchor.textContent == 'Login') {
anchor.click();
return
}
})
});
After these actions I expect to see this login window in the screenshot I do right after this using
await page.screenshot({ path: screenshot2 });
I also tried to use its x-path using page.$x(). Unfortunately none of these worked. The screenshot that I took right after the action returned the same result of the page like right before the intended click. I expect to see the login window popped up on the screenshot. Might it be that the screenshot function doesn't show this window even though it would be visible?
Is there a way to see the browser in action while a puppeteer script is executed? I did some experiments using
const browser = await puppeteer.launch({ headless:false });
But this didn't show any browser window. So currently I only have the screenshots as a return value.
Unfortunately I'm not too familiar with JavaScript...
How can I achieve to get this link clicked?

I found a better way: Selenium + python. Works right away. Awesome debugging functionalities. Supports Firefox as well. Easier syntax. Less Brainfuck.

Why does WebDriver not move to the next page when "clicking" an element?

I am doing:
driver = new webdriver.Builder()
.forBrowser('safari')
.build();
var referrer = 'http://localhost:3000/tours/hood-river';
// console.log(referrer);
driver.get(referrer);
driver.findElement(By.id('requestGroupRate')).click();
//requestGroupRate is a link, so clicking it should move it to a new page
driver.wait(function(){
return driver.findElement(By.id('myThing')).then(function(element){
console.log("hereere");
assert(element.value === referrer);
done();
});
},10000);
I find that the findElement(By.id('myThing')), fails, even though the page it should be on clearly has 'myThing'. But if I change the line to
driver.findElement(By.id('requestGroupRate'))..
Then the element is found! This leads me to believe, that the click() does not cause the driver to navigate to the link.
EDIT: The link I am trying to click on:
<a id="requestGroupRate"
href="/tours/request-group-rate">Request Group Rate.</a>

you can simply add driver.sleep(10000) after click() for debug purpose.
if the page changed, means the link and click() worked and the possible failed reason it's when script click on the link, the page is still loading, so browser failed to response to the click event.
then you can move the driver.sleep(10000) after browser.get() to see click() can work or not.

As suggested by acdcjunior findout if element is clickable use browser developer tools. Chrome it is a side panel, Firefox it is a marker at the end of the HTML tag.
I have had issues getting Selenium to click on a GIS map. In that case i use an alternative (will need to translate this Java into Javascript):
((JavascriptExecutor) driver).executeScript("document.getElementById('map_container').dispatchEvent(new Event('click'));");
Also suggest testing your xpath in the browser developer console:
document.evaluate(".//tagName[#id='Query']", document,null, XPathResult.ANY_TYPE, null).iterateNext();
Or testing your cssSelector in the browser developer console:
document.querySelector('#idtext')

Close Flipkart open pop-up and go to main window using Selenium

WebDriver driver = new FirefoxDriver();
driver.get("https://www.flipkart.com");
driver.manage().window().maximize();
String parentWindowHandler = driver.getWindowHandle(); // Store your parent window
String subWindowHandler = null;
Set<String> handles = driver.getWindowHandles(); // get all window handles
Iterator<String> iterator = handles.iterator();
while (iterator.hasNext()){
subWindowHandler = iterator.next();
}
driver.switchTo().window(subWindowHandler);
I tried it by switching to main window also. Please add valuable input or code to close the pop up.

You can try using the java Robot API by importing java.awt.Robot libraries. An example is here:
One solution for File Upload using Java Robot API with Selenium WebDriver by Java
You can try to use it similarly to press the Esc key. Pressing Esc on flipkart website gets rid of the pop-up.

The pop-up which appears on Flipkart's website is a simple HTML modal. Window handle is used when a new pop-up window needs to be accessed.
To close the pop-up just click on the cross on the top right corner of the pop-up. Use waits to ensure that selenium finds the WebElement.
Try this:
driver.get("https://www.flipkart.com");
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement cross = wait.until(
ExpectedConditions.visibilityOfElementLocated(By.className("close-icon")));
cross.click()