I am new to cypress automation. I tried to use the following locator to click on the specific dynamic button.
cy.contains('span', 'Agile Fundamentals').next().find('button').click()
but it did not work.
.next() won't work in this case because the next element would be the text label with the date.
Instead, we can to use .parent() and .siblings() to move over to the other div and grab that button.
cy.contains('span', 'Agile Fundamentals')
.parent() // moves us to the div around the span
.siblings('div') // moves us to the sibling div
// could use `.next()` above instead
.find('button') // moves us to the button
// If you want to save this for ease of use, you can assign it an alias
.as('dynamicButton')
// and reference it like...
cy.get('#dynamicButton')...
There is another way, change the target of .contains() to the card itself (the top level of that group of elements).
Starting from that element, .find() will get the button regardless of the nesting structure within the card.
cy.contains('div.MuiCardHeader-root', 'Agile Fundamentals')
.find('button')
.click()
Another approach to finding the button would be using the aria-label of the button. This will ONLY work if your DOM does not have another element with the same aria-label value.
cy.get('[aria-label=settings]')
.click()
If you there are other elements in the DOM that have matching attribute, then you can limit your search to the specific card
cy.contains('.your-card-selector', /agile fundamentals/i)
.find('[aria-label=settings]')
.click()
Related
I have a div that contains a set of dynamic elements. I want to click on the first search result.
I want to click on the first element contains in
I tried using creating a custom xPath like so but it didn't work. Any ideas here?
//div[1][contains(text(), 'listing')]
First of all It would've helped if you had provided more information.
best will be using pseudo-child like div.firstChild or if the elements are generated dynamically you can add a class and use document.querySelectorAll(".class") which will give you an array of elements that had the class.
You can use array[0] to use click on the first element.
For anyone coming across this thread here is the solution
const listings = await page.$x('//*[contains(#id,"listing_")]')
Example Image
say I wanted to select the element with class=kbkey button red_selected sel. Its xpath from the example in the pic would be //*[#id="virtualKeysWrapper"]/div[3], so I have the following code:
WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.XPATH, '//*[#id="virtualKeysWrapper"]/div[3]'))).click()
However, the div position of this element would change everytime I refresh the site. Was wondering what should I do to successfully select the element with class=kbkey button red_selected sel successfully everytime?
Avoid using index position in XPath if at all possible for this very reason. Without knowing exactly what the rest of the DOM looks like, my best guess is that you could use the following expression:
//div[#id='virtualKeysWrapper']/div[#class='kbkey button red_selected sel']
Alternatively, you could use
//div[#id='virtualKeysWrapper']/div[#sel='true']
im trying to find an element with dinamic values , for example <span class="ms-Button-label label-175" id="id__177">Save</span> in inspect element, the id and class values tend to change for every refresh, how can i in this case find the element in selenium? i tried troguht xpath but seems doesnt work because can not find the path, i was thinking to find "Save" world torught always find by xpath but actually i dont know if im doing well : driver.find_element_by_xpath(//span(#.... but then? how can insert element if it changes everytime? thanks!
Something like this may work:
driver.find_element_by_xpath('//span[text()="Save"]')
But this will fail, if there is more than one button with text "Save" on the page.
In that case you may try to find some specific outer element (div, form, etc.) which does not change and contains the button. Then find the button inside of it.
With few requests with driver:
specific_div = driver.find_element_by_id("my_specific_div")
button = specific_div.find_element_by_tag_name("span") # e.g. there is only one span in that div
Or with more specific xpath:
button = driver.find_element_by_xpath('//div[#class="some-specific-class"]/span[text()="Save"]')
If needed, search for more nested elements before the button, so you can get more narrow search field.
More examples in the docs.
I am clicking with the help of following lione oc code->
actions.moveToElement(objDriver.findElement(By.id("id_popcode")),coordinates.getX(),coordinates1.getY()-1).doubleClick().build().perform();
Basically i double click at a position(x,y) in our application. Individually we cannot click that particular element bcoz it has to be clicked at particular (x,y) itself. So i want to get the properties of that clicked element(which i click using actions command which i mentioned above) liked id, classname. Can some one help me with this...kinda stuck here..........
edit:
try execute.elementFromPoint() with JavascriptExecutor to get element by coordinates
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement theElement = (WebElement)js.executeScript("return document.elementFromPoint(arguments[0], arguments[1])", coordinates.getX(), coordinates1.getY()-1);
System.out.println(theElement.getAttribute("tagName"));
System.out.println(theElement.getAttribute("class"));
old:
you are using negative value in getY()-1 which mean coordinates above the element, it maybe the parent or preceding-sibling of element try to select it using xpath
WebElement popcodeBefore = objDriver.findElement(By.xpath("//*[#id='id_popcode']/parent::*"));
// Or
// WebElement popcodeBefore = objDriver.findElement(By.xpath("//*[#id='id_popcode']/preceding-sibling::*"));
System.out.println(popcodeBefore.getAttribute("class"));
actions.moveToElement(popcodeBefore).doubleClick().build().perform();
If you have any specific text at that particular coordinates make use of it. I too had the same issue like this where I need to double click on a cell which had text 0.00%. I have done hovering action first using the text and then performed the double-click
Ignore the syntax issues since I am working on the protractor these days
browser.driver.actions().mouseMove(driver.findElement(by.xpath("//*[text()='00')]").build().perform();
and then perform the click
Still, you have issues, check if you have any attribute like ng-click which can be helpful to get the coordinates for that particular location. please always share the HTML code so that It may help us to check more deeply
I am trying to select a specific item in a page which is at the bottom of the page. I want to verify that element is present and the same time I want to focus to that specific item.
How can I do this in the Selenium IDE?
I tried storeEval, but its specific co-ordinated which I don't want. I am looking for some dynamic command. I tried using css:.groupTile:contains("Concentrated") but the focus is not going to that particular item (Concentrated).
Can someone help me with Command, Target and value please?
CSS Selectors have many formats
i) Using id. Put this in Target: css=tag#id
tag = the HTML tag of the element being accessed,
id = the ID of the element being accessed
ii) Using class. Put this in Target: css=tag.class
tag = the HTML tag of the element being accessed,
class = the class of the element being accessed
In value you enter name of the item.