Go back to parent element - CSS selector in Cypress - css-selectors

Can someone please assist in following case:
I have to check in if statement does element exist. Since there is no possibility to use Xpath in find command (Throws Syntax error when run it with Xpath).
My code looks:
cy.xpath(list)
.eq(index)
.then(($el1) => {
cy.get('body').then((body) => {
if (
body.find(
currentBase +
currentTitle[index] +
currentExtension
).length > 0
) {
...
Where currentBase is Xpath before text, currentText - element with text and currentExtension is concatentation to get element below that text element.
I do not want to use those classes since they are dynamic ones (also, can not be changed with some unique attribute in near future)
And DOM looks:
Namely, easily is found marked img element, but with following CSS, it does not work
#structures img[src*="/static/media/image"].$('..').$('..').$('..') div:nth-child(2)
What I want is, to find div below element with text Element One
What I am doing wrong?
Or is there any other way in Cypress to use together if statement and to pass that step if element is not found?
Thank you in advance

You can do something like this. This will get you the div element just below Element One and which is also the parent element for the img
cy.get('img[src*="/static/media/image"]').parent('div')

Related

"How to fix 'at org.openqa.selenium.support.ui.Select.<init>' error in selenium"

I have created the object of Select in selenium to handle dropdown . Also have included the associated packages. Yet the dropdown is not getting selected. Kindly help!
Select select = new Select(driver.findElement(By.xpath("/html[1]/body[1]/div[1]/div[1]/header[1]/div[3]/div[1]/div[1]/div[6]/ul[1]/li[1]/a[1]")));
select.selectByValue("Blouses");
I am recieving the following error "at org.openqa.selenium.support.ui.Select.(Select.java:48)";
Alongwith a note when i hover over Select -
org.openqa.selenium.support.ui.Select
Note: This element neither has attached source nor attached Javadoc and hence no Javadoc could be found.
As far as I can see your XPath expression ends with a which indicates <a> HTML tag which in its turn stands for a hyperlink
In order to be able to use Select class you need to pass to it's constructor a WebElement instance which will point to a <select> HTML tag.
If there is no <select> elements in your page source code - it means that the dropdown is being generated by means of CSS and JavaScript therefore you just need to click the link with the Blouses text which in its turn can be as simple as:
driver.findElementByLinkText("Blouses").click()
If you still want to use XPath - be aware that you can make it a lot shorter, readable and reliable: limit your search scope to hyperlinks only like //a and utilise text() XPath function to match only "interesting" links, the expression which will click the link with Blouses text would be something like:
driver.findElementByXPath("//a[text()='Blouses']").click();

Protractor classname locator fails but xpath locator passes

Protractor assertion passes with the xpath locator but not with the classname locator.
Works
var menu = element(by.xpath('/html/body/page/div[1]/div[3]/div[2]/div[1]/span'));
Passes it's assertion.
Fails
var menu = element(by.classname('menu'));
Yields the following errors:
In chrome,
Failed: element not interactable
In firefox,
Failed: Element could not be scrolled into view
Why might this be?
by.classname() will be convert to by.css() by protractor inside.
by.classname('menu') will be convert to by.css('.menu').
Try css selector: .menu manually in chrome DevTools and check the first element found by .menu is same as by the xpath: /html/body/page/div[1]/div[3]/div[2]/div[1]/span.
We're not able to suggest any reliable css selector without seeing DOM, especially when you don't use menu class in your xpath selector.
If you want to convert it into css selector, you can try:
element(by.css('page > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) >span')); or any shorter equivalent.
Here was the problem, I had multiple elements with the same classname. What protractor was doing was taking the first element with that class. What it should have been doing was taking the second but related element with that class.
I tried element.all(by.className('menu')).get(1) and it works perfectly.
Thanks for your help #yong and #Kacper for pointing me in the right direction.

Finding other elements like select, button within div having the same class name in selenium

I have multiple divs with the same class name. I was able to retrieve all the divs through the findelements code. But I have a select element within one of the div. I am trying to retrieve the select element within the div.
The HTML code is as below.
Selenium code I tried.
IList <IWebElement> elements = driver.FindElements(By.XPath("//div[#class='className']"));
foreach (IWebElement widget in elements)
if(widget.FindElement(By.TagName("select").Enabled)
----- Perform sone operations-----
The above code is not working. Can anyone suggest solution to identify the select element.
Doing
IWebElement element = driver.FindElement(By.XPath("//div[#class='className']//select"));
will directly get you to the select tag you want to interact with.
If it so happens that this returns more than 1 element, you can further narrow down your search by providing a class or any other attribute to the select tag on your xpath, like so:
IWebElement element = driver.FindElement(By.XPath("//div[#class='className']//select[contains(#X,'Y')]"));
Where:
X - can be any attribute of that element (id, name, class...)
Y - a substring value of X attribute
Take for example:
This page:
"//div//ul/li/a" will give you 57 matches;
"//div//ul[contains(#class,'sf-menu')]/li/a" will give you 3 matches;
"//div//ul[contains(#class,'sf-menu')]/li/a[contains(#title,'Dress')]" will give you 1 match;
Good luck!

How to locate pseudo element like ::before via selenium2library

I do not know how to locate the pseudo element ,while using robotframework-selenium2Library to do web test.
Any help is useful.Thanks.
the test script is like below:
Click Element my_element
ID:
Click Element | id=my_element Matches by #id attribute
Thank to Alex Bruce, it works.
Pseudo web elements wont be part of DOM so it is not possible to get attribute value from selenium2library. Instead we can get it from Execute Javascript like below snippet.
${attribute_value}= Execute Javascript return window.getComputedStyle(${element},${pseudo_element}).getPropertyValue('${attribute}');
I was looking for same and found great working code in below link. (JFI - No promo)
Check key "Get Pseudo Element CSS Attribute Value" in the below link.
https://adiralashivaprasad.blogspot.com/2018/06/how-to-get-pseudo-element-css-attribute.html

Protractor: path relative from the element

I want to write something like:
return component.element(by.xpath('//div/div/a')); // I want: path to component + xpath
But I always have the result same with:
return element(by.xpath('//div/div/a')); // I always have: just xpath
Component is an element that was found with my own locator:
component = element(by.Name('Component_name'));
What I doing wrong?
I guess it is because of the selector for xpath locator. When you use expression starting with //, it will look for any element on the page, even if you use it with parent element. There is a note about it in the docs for xpath locator:
For example, given the selector "//div", WebDriver will search from
the document root regardless of whether the locator was used with a
WebElement.
It can be fixed by putting a dot before double slash: .//div/div/a, which should make a search relative to parent element.
Take a look at xpath spec, to find more info.

Resources