Updated outer html and latest error. It seems the element was detected but failed to click onto it.
My script fail at below element, I have tried many way to re-construct xpath but the robot keep failing the DOM invalid.
original element:
<div class="ant-select SearchPrompter_advInput__3P9Jf ant-select-multiple ant-select-allow-clear ant-select-show-search">
<div class="ant-select-selector">
<div class="ant-select-selection-overflow">
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 3px;">
<input autocomplete="off" type="search" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_2_list" aria-autocomplete="list" aria-controls="rc_select_2_list" aria-activedescendant="rc_select_2_list_0" value="" id="rc_select_2" style="opacity: 0;" aria-expanded="false" readonly="" unselectable="on">
<span class="ant-select-selection-search-mirror" aria-hidden="true"> </span>
</div>
</div>
</div>
<span class="ant-select-selection-placeholder">Select Source(s)</span>
</div>
</div>
script:
*** Settings ***
Library Browser
Library OperatingSystem
Resource ../Resources/BrowserParameters.robot
Resource ../Resources/BrowserResources.robot
Resource ../Resources/BrowserCustomKeywords.robot
#Select Browser: chromium or firefox
Test Setup Test Setup Browser=chromium
Test Teardown Test Teardown
*** Test Cases ***
001
Click //span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')]
Error
FAIL
Message: TimeoutError: locator.click: Timeout 10000ms exceeded.
=========================== logs ===========================
waiting for selector "//span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')] >> nth=0"
selector resolved to hidden <span class="ant-select-selection-placeholder">Select Source(s)</span>
attempting click action
waiting for element to be visible, enabled and stable
element is not stable - waiting...
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
<div class="ant-select-selection-overflow">…</div> intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
[ Message content over the limit has been removed. ]
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
<div class="ant-select-selection-overflow">…</div> intercepts pointer events
If I use this, then I can see the field being accessed and list is displayed. however in the form has 2 fields using this same xpath. So robot accessed into 1st field, but I wanted it goes to next field.
Click //div[#class="ant-select SearchPrompter_advInput__3P9Jf ant-select-multiple ant-select-allow-clear ant-select-show-search"]
Please correct your Xpath from
//span[#class=""ant-select-selection-placeholder">Select Source(s)"]
to
//span[#class="ant-select-selection-placeholder"]
Or
//span[#class="ant-select-selection-placeholder" and (text()="Select Source(s)")]
This error message...
Error: locator.click: DOMException: Failed to execute 'evaluate' on 'Document': The string './/span[#class=""ant-select-selection-placeholder">Select Source(s)"]' is not a valid XPath expression.
...implies that the XPath you have used isn't a valid xpath expression.
You have to make two minor adjustments as follows:
The value of the class attribute must be within single double quotes i.e. "value"
Select Source(s) is the innerText within, so you have to mention it as text.
Solution
You can use either of the following Locator Strategies:
xpath 1:
//span[#class='ant-select-selection-placeholder' and starts-with(., 'Select Source')]
xpath 2:
//span[#class='ant-select-selection-placeholder' and contains(., 'Select Source')]
Please use below xpath
//span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')]
or
//span[contains(#class,'ant-select-selection-placeholder') and starts-with(text(),'Select Source')]
Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.
Steps to check:
Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.
If we have 1/1 matching node, Please make sure that :
This div is not under an iframe.
This div is not under a shadow-root.
You should not be on new tab/windows launched by selenium.
Related
I was making an element visibility tag to track when my form shows the thank you message. Typically I use a CSS selector. However, the CSS selector is the same for both the error message and the success message.
Error:
<div class="wpcf7-response-output" aria-hidden="true">One or more fields have an error. Please check and try again.</div>
Success:
<div class="wpcf7-response-output" aria-hidden="true">Thank you for your message. It has been sent.</div>
In a visibility trigger, the built-in {{Click Text}} variable assumes the value of the innerText property of the selected element.
So if you select the element via css selector equals .wpcf7-response-output, you can then apply a filter Click Text starts with Thank you to recognize the success message.
Not the most robust solution, and takes extra steps on multilingual pages, but if you do not change the text of your success message too often it should work.
I am trying to select a dropdown item using Cypress. When i use the Cypress's Open Selector Playground, and point at the Web Element, i get cy.get('.Dropdown-placeholder').type('Name')
I get an error:
CypressError
Timed out retrying: cy.type() failed because this element is detached from the DOM.
<div class="Dropdown-placeholder"></div>
Cypress requires elements be attached in the DOM to interact with them.
The previous command that ran was:
> cy.get()
This DOM element likely became detached somewhere between the previous and current command.
Common situations why this happens:
- Your JS framework re-rendered asynchronously
- Your app code reacted to an event firing and removed the element
You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.Learn more
and when i try to get the CSS Selector for the actual Entry, i get:
cy.get(':nth-child(3) > #Question > .Dropdown-root > .Dropdown-control > .Dropdown-placeholder')
when i try cy.get('.Dropdown-placeholder').focus().type('Name')
I get Error:
cy.focus() can only be called on a valid focusable element. Your subject is a: <div class="Dropdown-placeholder"></div>
and for: cy.get('.Dropdown-placeholder').click().type('Name')
i get error:
CypressError
Timed out retrying: cy.click() failed because this element is detached from the DOM.
<div class="Dropdown-placeholder"></div>
Cypress requires elements be attached in the DOM to interact with them.
The previous command that ran was:
> cy.get()
This DOM element likely became detached somewhere between the previous and current command.
Common situations why this happens:
- Your JS framework re-rendered asynchronously
- Your app code reacted to an event firing and removed the element
You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.Learn more
And here is the HTML:
<div class="Dropdown-root module-Questions-module-dropDownContainer--2bcD7--"><div class="Dropdown-control" aria-haspopup="listbox"><div class="Dropdown-placeholder is-selected">Name</div><div class="Dropdown-arrow-wrapper"><span class="Dropdown-arrow"></span></div></div></div>
I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:
I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});