I'm wondering if xpath has a way to test an element for a class. I currently have the ID, I would just like to be able to test to ensure JS added a class.
My element where I'm testing to see if id=foo contains class=red.
<span id="foo" class="red">test</span>
I'm assuming you would use xpathCount?
getXpathCount(("//a[#id='foo']") not sure what goes next).equals(1);
I've also tried this without success,
getXpathCount("//span[#id='foo'].span[contains(#class,'red')]").equals(1);
The xpath to use would be
//a[#id='foo' and #class='red']
Related
Tried cy.get(#Username) , doesn't work- cypress says it can't find it. could it be related to uppercase letter?
Installed Xpath plugin and used this
cy.xpath('//input[#id="Username"]') but it didn't work.
<input type="email" class="form-control" autocomplete="off" data-gd="identity-login-local-form-username" autofocus="" data-val="true" data-val-required="The Username field is required." id="Username" name="Username" value="">
Please before giving -1 , please explain what I need to improve. Thanks!
After downloading xpath plugin, did you add require('cypress-xpath') in your project's cypress/support/index.js file?
According to your example, code below should find the Username
cy.xpath('//input[#id="Username"]')
cy.get('#Username')
The capital letter may be causing the problem. Usually ids have a small letter.
Try using the data-gd attribute instead.
cy.get('[data-gy="identity-login-local-form-username"]')
If that does not work, you may have some shadow DOM before the <input> that blocks the search, in which case you can search inside the shadow like this
it('tests the input', {includeShadowDom:true}, () => {
cy.get('[data-gy="identity-login-local-form-username"]')
})
I tested with a capital letter cy.get('#Username') and cy.xpath('//input[#id="Username"]') - both worked for me, so likely there is shadow DOM or an <iframe> on your page.
Is it possible that the page has a default namespace? If the page is served as XHTML, it may have a default XML namespace, in which case the input's name is not simply input.
If that is the problem, then you could declare the http://www.w3.org/1999/xhtml namespace and associate it with a prefix, e.g. xhtml (I don't know cypress so not sure how you'd do that), and then query for //xhtml:input[#id="Username"]. An alternative is to query for an element whose local name is input in any namespace at all, e.g. //*[local-name()='input'][#id="Username"]
In case your username field is under a shadow DOM which means other fields will also be under the shadow Dom, it would be advisable to write includeShadowDom: true in your cypress config file to avoid repetition(cypress.json if cypress version < 10; cypress.config.js if cypress version > 10), then directly use the command:
cy.get('#Username').type('username-text')
In case your username field is under an iframe, you can get the cypress iframe plugin
To install npm install -D cypress-iframe
Go to cypress/support/commands.js file, add the following:
import 'cypress-iframe';
// or
require('cypress-iframe');
In your test write:
cy.iframe('#my-frame')
.find('#Username')
.should('be.visible')
.type('username-text')
I can also confirm the way you are selecting the Username input element is correct.
If you suspect shadow DOM is interfering with your test, the best way to debug IMO is to
inspect your DOM around the <input>
look for a parent element that has #shadow-root below it (in bold)
change the test to include this parent
add the .shadow() command after the parent to break through the barrier
cy.get('parent-with-shadow-root')
.shadow()
.find('#Username')
This debugs and confirms your issue. Everything else, e.g setting global config etc can be done after you know what you have to deal with.
After I tried suggestions and people's confirmation that my xpath was correct, I shifted my focus on the error I got while Cypress was trying to find the element. The error I got was uncaught exception.https://stackoverflow.com/questions/53845493/cypress-uncaught-assertion-error-despite-cy-onuncaughtexception
This error occurs when a module fails to load due to some exception. The error message above should provide additional context. A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
Using ngRoute In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
In this crud test I create a log entry with #notes and will try to update the log by replacing #notes with #updated_notes.
#notes = Faker::Crypto.md5
#updated_notes = Faker::Crypto.sha256
This block of code to create the log entry works. I used within and the id's of divs in the source code with inspect.
it 'User can update manpower log entry' do
# create a new entry
within '#manpower_log_div' do
find('#manpower_log_notes').send_keys(#notes)
click_button "+ Add"
expect(page.has_css?('td', #notes)).to be true
end
Here I try to click the already existing notes on the page, which lets me edit them.
# click the already existing notes to be able to edit them
within '#manpower_log_div' do
find('#inline_edit').click
end
The error received is
Capybara::ElementNotFound:
Unable to find css "#inline_edit"
Inspecting the element gives us this, but notice the id of the object is too specific: data-object_id="11747753". What element can I place in find that I can use every time I run this test?
<span textarea_cols="50" class="inline_textarea_edit inline_editable" data-object_field="notes" data-object_id="11747753" data-object_class="ManpowerLog" data-custom_callback="" id="ManpowerLog-11747753-notes" data-value_required="false">a5c3e556f108fd29b00150ca736c82d6</span>
You can find the element by any valid CSS selector that would match it. In your example you could use class or data attribute - or a combination of both.
find('span.inline_textarea_edit[data-object_field="notes"]').click()
In your code find('#inline_edit') is looking for an element with id inline_edit. As Thomas Walpole mentioned you can find your button using css selector for example by class:
find('.inline_textarea_edit')
or
find('.inline_editable')
or
find('.inline_textarea_edit.inline_editable')
Make sure that class is uniq for that element. If not, you'll need to use something else then class or something else together with class, you need to look for uniq attribute of that element.
Also make sure that your element is within element with ID manpower_log_div as you are using within '#manpower_log_div'
You can find more info about css selectors here: http://www.w3schools.com/cssref/css_selectors.asp
I'm trying to implement a simple piece of logic that says if element exists on page do something`
The issue I am facing is that if the element doesn't exist then the find method provided returns an exception and will fail my test.
(Capybara::ElementNotFound)
so for example I want to do something like:
if page.find(".element")
do something
end
If the element doesn't exist then the test should just carry on as normal.
Is there a way to do this?
Consider using something like this:
if page.has_css?('selector')
do something
end
This method is described here
I have an element whose html is like :
<div class="gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text">Announcements</div>
I want to check the presence of this element. So I am doing something like :
WebDriver driver = new FirefoxDriver(profile);
driver.findElement(By.cssSelector(".titlePanelGrayDiagonal-Text"));
But its not able to evaluate the CSSSelector.
Even I tried like :
By.cssSelector("gwt-Label.textNoStyle.textNoWrap.titlePanelGrayDiagonal-Text")
tried with this as well :
By.cssSelector("div.textNoWrap.titlePanelGrayDiagonal-Text")
Note : titlePanelGrayDiagonal-Text class is used by only this element in the whole page. So its unique.
Contains pseudo selector I can not use.
I want to identify only with css class.
Versions: Selenium 2.9 WebDriver
Firefox 5.0
When using Webdriver you want to use W3C standard css selectors not sizzle selectors like you may be used to using in jquery. In your example you would want to use:
driver.findElement(By.cssSelector("div[class='titlePanelGrayDiagonal-Text']"));
From reading over your post what you should do since that class is unique is just do a FindElement(By.ClassName("titlePanelGrayDiagonal-Text"));
Also the CssSelector doesn't handle the contains keyword it was something that the w3 talked about but never added.
I haven't used css selectors, but this is the xpath selector I would use:
"xpath=//div[#class='gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text']"
The css selector should then probably be something like
"css=div[class='gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text']"
Source: http://release.seleniumhq.org/selenium-remote-control/0.9.2/doc/dotnet/Selenium.html
Did you ever tried following code,
By.cssSelector("div#gwt-Label.textNoStyle.textNoWrap.titlePanelGrayDiagonal-Text");
I believe using a wildcard in CSS would be more helpful. Something as follows
driver.findElement(By.cssSelector("div[class$='titlePanelGrayDiagonal-Text']");
This will look into the class attribute and see what that attribute is ending with. Since your class attribute is ending with "titlePanelGrayDiagonal-Text" string, the added '$' in the css statement will find the element and then you can perform whatever action you're trying to perform.
This line will not work but I think I have used correct xpath?
driver.findElement(By.xpath("//a[contains(#class,'cke_button_bold')]")).click();
to locate a button like below :
<a id="cke_73" class="cke_off cke_button_bold">
id is a dynamic number so can be used as fixed locator here. And class is a compound class which is not supported by WebDriver findElement method...
I created simple html file and your xpath works with FirefoxDriver in WebDriver 2.1.0.
Also you can try to use
driver.findElement(By.className("cke_button_bold"))
Classname is supported by webdriver Api
Step 1:
Find the CSS Selector
Possible CSS Selectors here:
css=a[id*='cke']
css=.cke_off cke_button_bold
The above can be used Or Already we are having the method .ClassName But for avoiding duplication of Elements and Ambiguity we can use CSS Selector.