I want to trigger the text using mouseover in cypress with javascript? - automation

cy.xpath("(//[local-name()='svg']//[name()='g' and #data-z-index='8'])[1]//*[name()='text']").wait(300)
.trigger('mouseover', { force: true }).then(($text1) => {
var textValue2 = $text1.text()
cy.log(textValue2)
})
This is code I'm using triggering to perform mouseover to get the text
facing error not finding the element showing "Timed out retrying after 4000ms: Expected to find element: (//[local-name()='svg']//[name()='g' and #data-z-index='8'])[1]//*[name()='text'], but never found it."
Note: But the xpath is correct, If I manually hover then retrieve the text.

Use trigger('mouseenter') it should works

Related

How to find prompt by Selenium

Does anybody know how to find this type of element by Selenium? (to validate its presence or text)?
I tried to catch it as alert (swithToAlert()) but it doesn't work. Any ideas? It is also can not be inspected as element and I can't find it in Elements. Thank you in advance.
This uses HTML5 form validation. This is created by the browser, and does not exist in the DOM. Therefore Selenium cannot see this.
You can access this using JavaScript. Here is a brief code sample:
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
WebElement field = driver.findElement(By.tagName("input")); // your input box
if (!(Boolean) jsExecutor.executeScript("return arguments[0].validity.valid;", field)) {
return (String) jsExecutor.executeScript("return arguments[0].validationMessage;", field);
}
The entire API is documented.
element.validity.valid
Returns true if the element's value has no validity problems; false otherwise.
So this popup is displayed if this returns false, but only after clicking Submit on the form.

How to target an element inside shadowRoot (user-agent) in Puppeteer

could you please help me with targeting the concrete element in e2e test?
I´m using Jest and Puppeteer and I have this DOM structure (see in attachment below):
And I need to target the red underlined element. How would you target that element?
I tried it like this,
const inputContent = await page.findAll(
'usu-date-picker >>> .sc-usu-input >>> div',
);
console.log(inputContent[1]);
but what I got returned was element with type node "INPUT", which I don´t understand why.
Thank you for your help.
you can use this:
await page.evaluate( () =>
document.querySelector("#date-picker")
.shadowRoot.querySelector("usu-input > div > input")
.shadowRoot.querySelector("div:nth-child(2)").value
);
You should try the query in the devtools console to see if you are doing it right
Example from devtools console

Select Kendo ComboBox in Cypress

I have problem with selecting value from combobox in Cypress.
It allways writes me that:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="fabric_listbox">...</span>
Types text into numeric inputs
My code looks like this:
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/combobox/index');
cy.get(':nth-child(4) > .k-dropdown-wrap > .k-select').select('Polyester')
})
})
Can you please give me some help?
You could try it on this page: https://demos.telerik.com/kendo-ui/combobox/index
Thank you.
I resolved it.
Make cy.click() on the element
Found with cy.contains() text what is in the box and then click on it (cy.contains('text').click)
cy.select() will only work for native HTML <select> elements. In your case you should simply cy.click() on the element you want to select. This is the way for all custom plugins which mimic select behaviour.
cy.get('kendo-popup').contains('Foobar').click({force:true})
You might need to force click as the element might not be visible
cy.get('combobox').contains('value').click()
I found that Cypress scrolling the viewport to the chosen option caused the dropdown to close. This command tells Cypress to wait for the dropdown to become non-disabled, scroll to the dropdown, click on the dropdown, wait for the dropdown to finish animating, then click on the item without further scrolling.
Tested with Kendo UI v2016.1.226
Declaration in commands.js:
Cypress.Commands.add('selectKendoDropdownItem', (dropdownName, item) => {
cy.get(`span[aria-disabled="false"][aria-owns="${dropdownName}_listbox"]`)
.click()
.get(`div#${dropdownName}-list li.k-item`)
.contains(item)
.click({ waitForAnimations: true, scrollBehavior: false, force: true });
});
Use in a spec:
cy.selectKendoDropdownItem('dropdownElementId', 'Text of option to select');

click only visible element selenium webdriverjs

I have multiple div like below
<div class="one">send Message</div>
<div class="one">send Message</div>
<div class="one">send Message</div>
I have a web page where there is send Message buttons like above, in which only one button is visible at a time.Other two buttons are hidden via some javascript codes.So for example if 2nd button is visible , I should be able to click only that element.But in my selenium code , its trying to click first hidden div and its failing
driver.findElements(by.className(".one")).then((els) => {
var element = els[index];
element.click();
});
So basically I wanna convert below javascript code to Selenium nodejs code,If some one guide me that will be helpful
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
if (isHidden(all[i]))
// hidden
else
// visible
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return ((style.display === 'none') || (style.visibility === 'hidden'))
}
Do you want to click the button ( basically a div as far as code is concerned ) which is visible ?
If that is your main agenda, then the code you've written will fail to find desired element. As you are selecting the element by it's classname not its visibility.
Your code will find all the matched class element. As it's a basic element selector and all your buttons have the same class, so they are basically rendered on the page.
Approach 1
driver.findElements(by.className(".one")).then((els) => {
for(var key in els){
var element = els[key];
if(element.isDisplayed()){ //if visible element
element.click();
}
}
});
The Key here is to check if the element you are trying to click is visible on the page.
Approach 2
By giving a unique class to the target button. Some class for eg 'clickable' or 'active'. So it will be a more optimized solution to select the target element using the Css selector. The Key here is to give uniqueness to your target element to be more identifiable.
Usually many Java Scripts are run in the node Js without the convert.
Have you try it in the node Js without converting ???
** Remember to import selenium

nightwatch selenium command "elements" returns error about first parameter, even when I pass in a css selector or xpath expression

I'm using nightwatch with selenium for automation testing. I'm trying to use the selenium command 'elements' which takes a css selector or xpath as the first parameter, but keep getting the following error :
Error while running elements command: Please provide any of the following using strings as the first parameter: class name, css selector, id, name, link text, partial link text, tag name or xpath
My use is like this:
module.exports = {
"My test" : function (browser) {
...
// want to get all the input elements from the document
browser.elements('input','name', function(els){
// of xpath like this
browser.elements('//input','name', function(els){
});
}
}
Any ideas why I'm getting this error? Thanks!
Ah I figured it out - the first param is a keyword which has to be one of these (from nightwatch selenium protocols.js)
var check = /class name|css selector|id|name|link text|partial link text|tag name|xpath/gi;
So the command needs to look like this :
browser.elements('tag name', 'input', function(el){
})