the HTML Element looks like
<div class="toggleButton" ng-class="{checked: settings.$storage.enabledApps[app.name]}" ng-click="settings.apps.toggleApp(app.name)"><input class="workplayEnabled switch" type="checkbox" ng-checked="settings.$storage.enabledApps[app.name]"></div>
i tried browser.click('.toggleButton .switch'),browser.click('.toggleButton'), browser.click(' .switch')
but it's not working
it throws the error as element not visible
whereas if i try browser.isSelected('.toggleButton .switch'),browser.isSelected('.toggleButton'), browser.isSelected(' .switch') it returns false
As it stands, it's really hard to pin-point your EXACT problem as you're doing multiple things wrong.
HTML breakdown:
that is HTML generated via AngularJS;
if you analyze the Angular attributes (ng-attributes/directives) you'll notice only your <div> has click-triggered functionality added (via ng-click="settings.apps.toggleApp(app.name)"), thus you only have to target the <div> element;
the <input> only has reactive behavior (if the toggle-button is checked, then it gets populated on ng-checked trigger);
Your problem: Now that we narrowed down the solution to clicking your <div>, we need to make sure your selector is returning the correct element.
open your Angular app, open the browser console & try seeing if your selector is working (e.g.: $(div.toggleButton)). If the CSS-selector returns more than an element($(div.toggleButton).length > 1), that means you have multiple <div>s with that class so you will have to find a more specific locator;
after you have found the correct locator for your <div>, I would add a .debug()(more info here) prior to your click in your WebdriverIO script so I could easily debug the scenario;
once in debug-mode, I would try with the same selector that found my element in the browser console.
!!! Note: .isSelected() will always return false in your scenario as you mentioned you failed to click the toggle switch, which is satisfying the ng-checked condition. You can verify this by manually selecting your toggle switch in debug-mode and then performing the .isSelected() command on your <input>. Then it should return true.
Related
I am a little bit new to programming but python really made get into it. I am trying to create a programm that automatically checks for updates in a website. I've successfully implemented the neccessary code to call the page of enrollment but yet there is one element that cannot be located. Since I have to do it for multiple courses and iterate throught them there is no specific id, I've tried to find it by title but also this didn't work.
Is there a way you can locate the button with the title "enroll".
I've tried
driver.find_element_by_xpath("//a\[#title ='enroll']").click()
but this didn't work and I always get
NoSuchElement
error.
The XPATH for the button is simply: //*\[#id="id572"\]
Here is the part of the HTML code:
From the screenshot of HTML code you provided, the element is <button>, not <a>.
Try this xpath expression //button[#title='enroll']
This should do it if it's not in any iframes. Just grab the button whose title is enroll and click. Your css selector was an a tag and it might get id dynamically.
driver.find_element_by_css_selector("button[title ='enroll']").click()
This is the code snippet for chroome:
driver.get("https://www.youtube.com/")
driver.find_element_by_xpath('//*[#id="search"]').send_keys("kao")
driver.find_element_by_xpath('//*[#id="search-icon-legacy"]').click()
The browser automatically opens Youtube and searches for the passed string[which is the task I intend to do]
The main problem appears when i start using firefox.The page loads properly.I am basically using the same code but every time I run it, it throws the following error:
Message: Element <g id="search"> is not reachable
I cannot pass any string to the search bar or even click it.
There is a slight error in the xpath //*[#id='search'] that it returns two elements as in below screen. The reason being the * in the above xpath acts as a wild card and matches the other ytd-searchbox<id="search"> tag in the page. The same is true for //*[#id="search-icon-legacy"].
So you must try changing to the xpath like below to locate the web elements uniquely
//input[#id='search']
//button[#id='search-icon-legacy']
Errored Xpath:
Your Xpath is not correct. It's Unable to locate search field and buttton
You can use this one
driver.get("https://www.youtube.com/")
driver.find_element_by_xpath("//input[#id='search']").send_keys("kao")
driver.find_element_by_xpath("//button[#id='search-icon-legacy']").click()
I have a scraping script written in Ruby which uses Selenium, Watir and ChromeDriver, all is working just fine with a Chrome browser window, but trying to run in headless mode just hits;
Selenium::WebDriver::Error::UnknownError: unknown error: Element <input id="desired_element" type="checkbox" name="desired_element" checked="checked"> is not clickable at point (660, 594). Other element would receive the click: <html lang="en">...</html>
I'm using Watir 6.8 and latest Chromedriver 2.33.
Any ideas whats n=behind the different behavior of the page when in headless vs non headless, and how I can deal with this?
The error message is telling you what the problem is when it says "Other element would receive the click:"
This means some other element on the screen is covering the checkbox you are trying to interact with. Likely this is caused by whatever the default browser size in headless mode being different than the default size of your browser when it is run non-headless, resulting in a different arrangement of elements
We can verify if this is the case by asking the size of the window in both headless and normal modes and seeing if the resulting values are the same.
size = browser.window.size
puts "The browser window is #{size.width} wide by #{size.height} high"
There are a few potential ways to solve this:
Specify or alter the browser 'window' size. for example
browser.window.resize_to 1024, 768
I prefer this, and normally have a command such as that to set the
browser size right after it is initialized. Set either to the
minimum supported size for your site, or the minimum recommended
size
Use another means to 'click' on the checkbox, such as sending a space at it
#browser.checkbox(name: "desired_element").send_keys " "
I do not prefer this as it doesn't really solve the source of the problem and you may experience other similar issues interacting with other elements on the site as your script progresses.
The reason for this kind of error is that web page doesn't load well enough to locate the element. As you have mentioned that the tests previously passed when you had headless true such issues might be because of .click() , please try replacing .click with .send_keys
.send_keys(selenium.webdriver.common.keys.Keys.SPACE)
When you use .send_keys() you might hit one more issue if it is failing to find elements, for solving this you will have to find the elements
elements = driver.find_element_by_tag_name("html")
elements.send_keys(Keys.SPACE)
Hope this helps you.
I am trying to click on an icon in a web page. This is the element I am attempting to click:
<a class="Button ButtonIcon IconOnly DataSelector NormalState"
id="ze6402ef81ea54445aec5dab8790c781f" tabindex="0"><span class="Icon"></span>
<span class="Text"></span></a>
I have no problem interacting with the code below:
browser.find_element_by_css_selector('ze6402ef81ea54445aec5dab8790c781f').click()
The problem is that the id is dynamic with each session. I have attempted a workaround with the following code with no success:
browser.find_element_by_xpath("//a[span/#class='Text']").click()
and
browser.find_element_by_xpath("//a[span/#class='Icon']").click()
Afterwards, I noticed that the element needs to be in a hover state in order to be clicked. So next, I used ActionChains to try to simulate a hover state -- again, with no success:
actions=ActionChains(browser)
element=browser.find_element_by_css_selector("//a[span/#class='Icon']")
actions.move_to_element(element).click().perform()
Then, I tried to TAB to the element via send_keys and ActionChains -- but it ended up cycling rapidly through page, instead of one element at a time:
actions.send_keys(Keys.TAB)
I wanted to put in my due diligence before posting my issue. Any assistance is appreciated - Thank you.
As you mentioned, you don't have a problem with the following line of code:
browser.find_element_by_css_selector('ze6402ef81ea54445aec5dab8790c781f').click()
But the only issue here is that the id is dynamic, so we can use the class attribute to construct an unique cssSelector or an unique xpath as follows:
cssSelector :
driver.findElement(By.cssSelector("div.Button.ButtonIcon.IconOnly.DataSelector.NormalState"));
xpath :
driver.findElement(By.xpath("//div[#class='Button ButtonIcon IconOnly DataSelector NormalState']"));
Use these XPaths:
//span[#class='Text']
//span[#class='Icon']
Yours were formatted incorrectly.
Using Watir I have been able to isolate this button element:
<BUTTON id=authButton class=commandButton onmousedown="$('newOrder:hiddenAuth').click();">Authorize Payment</BUTTON>
Here is my watir code:
$browser.div(:id, "rSide:j_id750_body").table(:index, 0) [1] [0] .button(:index, 0).click
I was able to see I'm on the <button> by using watir's "flash" method to highlight the button. For some reason I am unable to actually click the button. I think it might have something to do with the onmousedown code but I really don't know. Any help would be greatly appreciated.
The button is wired up to do some specific action when it see's the onmousedown event, so if .click is not working, the next thing to try is firing that specific event, instead of using the .click method.
If that doesn't work try forcing the javascript to execute the newOrderLhiddenAuth script.
oh and FYI for your developer, they may want to get into the habit of using lower case for their HTML tags
"the World Wide Web Consortium (W3C) recommends lowercase in HTML 4,
and demands lowercase tags in XHTML."