While using the following events in puppeteer getting error.
I had tried with both the method using Xpath and selector, unable to find the element through the script. Whereas, same selector can be traced or can be found in dev tools > Elements tab during the snippet code execution
Method 1: Selector
await page.waitForSelector('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span', {visible: true});
await page.hover('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span');
Error message:
events.js:116 (node:24684) UnhandledPromiseRejectionWarning: Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4 > a > span > span' is not a valid selector.
at predicate (eval at waitForPredicatePageFunction (:2:21), :6:20)
at eval (eval at waitForPredicatePageFunction (:2:21), :25:7)
at onRaf (puppeteer_evaluation_script:56:33)
at pollRaf (puppeteer_evaluation_script:48:5)
Update the below element as below it has worked
Earlier: Not working
await page.waitForSelector('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span', {visible: true});
await page.hover('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span');
Updated: Working
'await page.waitForSelector('li[id="menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4"] > a > span > span', {visible: true});
await page.hover('li[id="menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4"] > a > span > span');
`'
Related
I am trying to automate logging into Guidewire policy center application. I am able to enter the username and password but the click for login button is not working.
I have tried (commented code)
-normal click
-double click
-scroll to element and then click and then double click. (All code below)
-another option of using clientfunction but none of them are working.
There is no problem with the identifier/path of the element.
import {Selector, t} from 'testcafe';
import {ClientFunction} from 'testcafe';
fixture('Getting Started')
.page('http://localhost:8180/pc/PolicyCenter.do');
//const element=Selector('#Login-LoginScreen-LoginDV-submit > div').withText('Log In');
const clickSubmit = ClientFunction(() => {
document.querySelector("#Login-LoginScreen-LoginDV-submit > div > div.gw-label")
});
test('Login', async t=>{
await
.typeText('#Login-LoginScreen-LoginDV-username > div > input','su')
.wait(1000)
.typeText('#Login-LoginScreen-LoginDV-password > div > input','pw')
.wait(1000);
await element.with({ visibilityCheck: true }).with({timeout: 10000})
// .setNativeDialogHandler(() => true) .click(clickSubmit)
//.scroll(element)
//.click(element)
//.doubleClick(element)
clickSubmit()
await t.wait(5000);
});
I can't return the href, i did check all pages of stackoverflow to see if there is an solution, but sadly i did try a lot of them and non work.
This is how it looks:
this is a test
when i want to copy the selector it shows me this:
#bodyblock > ul > li:nth-child(1) > h4 > a
Well when i use that selector it shows me only the text (this is a test) not the link..
i need the url of that link.
i did try something like this,
var titlesList = document.querySelectorAll('#bodyblock > ul > li:nth-child(1) ');
or this
var titlesList = document.querySelectorAll('#bodyblock > ul > li:nth-child(1) ').href;
and this
let list = await page.$$eval('#bodyblock > ul > li:nth-child(1) > h4 ', a => a.href);
console.log (list)
none returns the url, what am i doing wrong?.
regards
You will need to use the selector that gets you the a element, then get the href off of that. Guessing from the selectors you have posted above, one possible way to do that:
const url = await page.$eval('#bodyblock > ul > li:nth-child(1) > h4 > a', el => el.href);
function getHref(){
var attrHref = document.querySelector("a").getAttribute("href");
console.log(attrHref);
}
getHref();
.getAttribute("href") should return the url.
Find a fiddle of the above code here:
https://jsbin.com/lototozezu/edit?html,js,console,output
I have the following code:
<div class="pt6-sm pb6-sm ta-sm-r d-sm-flx flx-jc-sm-fe"><button class="mb1-sm css-bz0cep ex41m6f0 secondary" type="button">Cancel</button><button class="ml3-sm mb1-sm css-17hmqcn ex41m6f0 primary" type="button">Save</button></div>
I'm attempting to click on the save button and I'm trying this:
const addBtn = await select(page).getElement('button:contains(Save)');
await addBtn.click()
I have also tried:
const [button] = await page.$x("//div[#class='elements']/button[contains(., 'Save')]");
if (button) {
await button.click();
}
I get an unhandled promise rejection. Any idea why?
Basically you get the UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'click' of undefined until either your selector is not correct / element doesn't exist or it haven't yet appeared on the page.
In this case it seems your xpath selector was not grabbing the element.
That will do the job:
const addBtn = await page.$x('//button[contains(text(), "Save")]')
await addBtn[0].click()
Did you know? If you right click on an element in Chrome DevTools "Elements" tab and you select "Copy": there you are able to copy the exact selector or xpath of an element. After that you can switch to the "Console" tab and with the Chrome api you are able to test the selector's content, so you can prepare it for your puppeteer script. E.g.: $x('//button[contains(text(), "Save")]').textContent should show the text of the button that you've expected to click on, otherwise you need to change on the access, or you need to check if there are more elments with the same selector etc. This may helps you to find more appropriate selectors.
am new to nightwatch
I just copy the first code form http://nightwatchjs.org/
Below showing the code
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'rembrandt van rijn')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('ol#rso li:first-child',
'Rembrandt - Wikipedia')
.end();
}
};
And getting Failure
error result
.waitForElementVisible('body', 20000) is showing error and also .assert.visible('input[type=text]') is getting fail
Actually the problem is that piece of code is a bit older, and google changed few things on their search page. So for testing purposes you could try it out with the following code:
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 5000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', ['rembrandt van rijn', client.Keys.ENTER])
.waitForElementVisible('button[name=btnG]', 5000)
.click('button[name=btnG]')
.pause(3000)
.assert.containsText('#rso > div > div > div:nth-child(2) > div > div > h3 > a',
'Rembrandt - Wikipedia')
.end();
}
};
It is edited and should work fine, test it and let me know if it is working for you.
Try to change this line of code from
"start_process" : false
to
"start_process" : true
Getting this error message when try to add a child element :
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
You can try that :
// Get element from shadow dom
var containerEle = Polymer.dom(this.root).querySelector('shadow_dom_selector');
// Create dynamic element
var newEle = document.createElement('span');
newEle.textContent = 'Hello World';
// Append
containerEle.appendChild(newEle);
If your container element have an id
Polymer.dom(this.$.containerElementId).appendChild(newEle);
In the context of your component, for example in the ready method, try the following.
ready(){
super.ready();
this.root.appendChild(newEle);
}
Or from outside of the component, for example in whatever hosts your component, try the following.
document.querySelector("your-component-is").root.appendChild(newEle);