Puppeteer sometimes clicks the wrong element - javascript

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.

Related

Selenium-webdriver, I cannot go to the modal window

I am new to automated testing. Faced such a problem, earlier in the test I go to the Iframe window to enter the "test card" data. Instead of "success page", a modal window is displayed on which I need to click. Selenium swears.
..............
await driver.switchTo().frame(driver.findElement(By.xpath('//*[#id="solid-payment-form-iframe"]'))).then.....
..............................
`await button46.click().then(async function() {
bot.sendMessage(-100********, land+"\nTest completed!!✅");
console.log(button46.click,'SubmitButton - done');
return true//it existed
})
await driver.switchTo().defaultContent();
const number = await driver.wait(
until.elementLocated(By.xpath('//*[#id="specialOffer"]/div/div[2]/div[1]/a'))
// (By.xpath('//*[#id="specialOffer"]/div/div[2]/div[1]/a'))
, 20000).then(number => {
return driver.wait(
until.elementIsEnabled(number), 20000)})await number.click();`
This is what the console writes:
ElementClickInterceptedError: element click intercepted: Element <a href="************************************* is not clickable at point (960, 536). Other element would receive the click: <iframe id="solid-payment-************************
Selenium webdriver
javascript
remote server - selenoid(aerokube)
To click an element with selenium element.click the element should be visible and clickable, but your element might be outside of the visible area or might be behind a dialog box. Try clicking by injecting javascript. I have worked with the Python version of selenium so see python code and convert according to your need:
driver.execute_script("arguments[0].click()", button46)
FIX PROBLEM:
await driver.sleep(5000)
const number1 = await driver.wait(until.elementLocated(By.xpath('//*[#id="specialOffer"]/div/div[2]/div[1]/a')))
await driver.executeScript("arguments[0].click()", number1)```

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);
//.....
}
});

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.

How to open popup window with window.open() having the confirmation message as Yex/No?

I am opening a pop-up window having the Message asking for confirmation that "Do you want to delete a record" with Yes/No buttons. But, its not working correctly. Below is the code:
var modal = window.open (sUrl,"", "dialogHeight:" + iHeight + "px; dialogWidth:" + iWidth + "px;status=no;scrollbars=yes;resizable=no;titlebar=no;", null);
modal.dialogArguments = messageObject;
As the program goes to this line it opens the pop-up window but does not load it and proceeds further finishing the whole JavaScript code. I want the program to stop till it gets confirmation from the child window Yes/No.
Note: I am getting the value of Yes/No using a hidden variable in the parent window. Here is the code written in child window and which gets me the confirmation value:
window.opener.setMsgValue(returnValue);
This is the function written in the parent window:
function setMsgValue(msgSel) {
document.getElementById('msgSel').value = msgSel;
}
I know I can do this using the window.showModelessDialog. But, this works only in IE8 and I am doing this code for chrome 39.
You could use something like
if (confirm("Are you sure?")) {
// Delete it!
} else {
// Do nothing!
}
It's shorter, but every browser styles it different.

JQuery new window with auto-execute script

I'd like to open a pre-determined webpage and execute a click event on it when it opens.
As an example, here's an experiment I did with a google power search:
$("#lnkSearch").click(function() {
console.log("you clicked Search");
$(this).attr("target", "_blank");
// build the search
var search = $("#txtSearch").val();
search = search + "+site%3Aloganyoung.za.net";
$(this).attr("href", "http://www.google.com/search?q=" + search);
//window.open($(this).attr("href"));
});
Now to add onto this, I have it in mind to open the first link in the search results automatically.
Is there a way that I can do this in the new window before I open it?

Categories