My HTML fragment is:
<label class="email">
Email
<input data-test="email" type="text" v-model="curMember.email_address">
</label>
Then in my cypress test the following 'GET' does not work (using attribute selector):
cy.get('[data-test="email"]').should('have.value', 'a#test.com')
the above times out trying to find the element but the folowing does work (using a class selector)
cy.get('.email>input').should('have.value', 'a#test.com')
Can anyone tell me what my problem is?
I am not sure that cypress provides of getting value from NON-class
but take a look at this https://docs.cypress.io/api/commands/get.html#Selector
for the first example, you can only check the length
cy.get('[data-test="email"]').should('have.length', '10')
Related
I am dabbling with a Role based access situation and am sort of stuck on the assertion.
For the Full Access the field is like so
<input class="clickable_input clickable_timeholder ui-autocomplete-input ui-widget ui-widget-content ui-corner-left hidden" data-old-value="12:00 am" type="text" value="12:00 am" name="program_constraint[event_window_constraints_attributes][0][local_start_time]" id="program_constraint_event_window_constraints_attributes_0_local_start_time" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
For the Readonly access the field is like so
<input class="hidden clickable_input clickable_timeholder" data-old-value="12:00 am" type="text" value="12:00 am" name="program_constraint[event_window_constraints_attributes][0][local_start_time]" id="program_constraint_event_window_constraints_attributes_0_local_start_time"></input>
I would like to work with only 1 selector that is the one with the full access and then check for exists or not to pass or fail the case.
I end up with the below assertion error primarily because both the conditions use the same ID and the only difference is in their class name. I have not found a good example yet to handle this. Being still a week old into working w/TestCafe, I understand the DOM model perfectly fine, I can't seem to quite incorporate this into a page model effectively and keep hitting a wall.
expected true to be falsy
This is my Selector definition in the page model:
this.eventWindowStartTime = Selector("#program_constraint_event_window_constraints_attributes_0_local_start_time")
my Test code for the assertion
await t.expect(programOptionsConstraintsPage.eventWindowStartTime.exists).notOk()
You can use the filter method to find only an element with a particular css class.
For example:
Selector('#input_id').filter('.ui-widget')
On this page https://bootstrap-vue.js.org/docs/reference/validation/ of the documentation of bootstrap-vue, they are giving an example of how to use vee-validate.
However, their example doesn't work for me, because i get a warning saying [vee-validate] A field is missing a "name" or "data-vv-name" attribute. In deed, there is no name or data-vv-name attribute in their example and after adding one of them, it works like a charm.
Is this example outdated / wrong?
<b-form-input id="example-input-1" v-model="form.name" v-validate="{ required: true, min:2 }":state="validateState('form.name')" aria-describedby="input-1-live-feedback" placeholder="Enter name"enter code here></b-form-input>
The documentation has been updated to require name attribute and not v-model binding.
<input v-validate="'required|email'" type="email" name="email">
So Yes. this needs to be updated
HTML looks like following
<input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" type="email" aria-labelledby="lbl-14" autocomplete="off" autocorrect="off" placeholder="" ng-reflect-type="email">
the code fails to find login box...tried by attribute
var email_xpath = "//*[type='email']"
then xpath
var email_xpath = "/html/body/ion-app/ng-component/ion-split-pane/ion-nav/page-login/ion-content/div[2]/ion-list/ion-item[1]/div[1]/div/ion-input/input"
var email = webDriver.findElement(By.xpath(email_xpath))
but still unable to get the element....
===============Updated===============
most of the solutions posted below works with selenium firefox driver. The issue was really with htmlunit driver that i was using in scala. Probably it cannot handle javascript properly. I changed it with firefox driver and your solutions works well. The application being tested is an Ionic app (angular), hence i will have to look for another headless solution later.
//*[type='email'] is not correct XPath. Try below instead:
//*[#type='email']
Note that type='email' predicate means child node with string value 'email':
<input>
<type>email</type>
</input>
While #type='email' means attribute type with value "email"
The previous answer is correct but You can try this also //input[#type='email']
The generic syntax is something like as mentioned below for xpath
// - means relative xpath, can be present anywhere inside DOM
tagName - means html tags like td,tr,span,br,input etc
#- denotes start of attribute name present inside html tag
value - actual attribute value present inside DOM
//tagName[#attribute='value']
You can use any XPath, as some are already mentioned by #Andersson and #zsbappa
some others are
//input[#class='text-input text-input-md' and #type='email']
//input[contains(#type,'email')]
Since you are using WATIR, you don't have to write xpath, write the below code, it would work.
b.text_field(type: "email").set "abc#gmail.com"
In my case, there are some legacy web sites, in which not all the inputs have
id attribute properly set. Such as this:
<div class="form-group">
<label>Amount</label>
<input id="unreasonablename" type="text" value=""></input>
</div>
But human testers can still test it by typing amount value in the input right behind "Amount". I'd like to make web driver do the same thing:
webDriver.inputAfter("Amount", 100); //I do not want to use "unreasonablename" to find the input.
But how can I find the input element after the text "Amount"? Thanks.
There is a relative question here: In Selenium Webdriver, how to get a text after an element?. But I'm not familiar with xpath and do not know if my case can be solved in the same way.
To find the <input> element just after the text Amount you can use the findElement() method along with the Locator Strategy as follows :
webDriver.findElement(By.xpath("//label[contains(.,'Amount')]//following::input[1]"));
you can try following_sibling as
webDriver.findElement(By.xpath("//*[text()='Amount']/following-sibling::Input"));
try this :
driver.findElement(By.xpath("//label[text()='Amount']/following-sibling::input")).sendKeys("amount to be sent");
you can write some generic method like below. It can be used for all the required fileds by passing the label name and input value as argument
void enterInputAfterLabel(String labelname,String value){
driver.findElement(By.xpath("//label[text()='"+labelname+"']]/input")).sendKeys(value);
}
I'm so new in writing scenarios for e2e testing in Angularjs. I want to write a scenario to test the login. I have a form which has an email field as follow:
<input type="email" placeholder="Enter your e-mail" name="email" ng-model="form.email" value="" required autofocus >
And in my scenario I'm having having the following line which tries to pass some email address to that input field:
input('form.email').enter('blabla#blabla.com');
But unfortunately I'me getting the following error after running the test:
6ms input 'form.email' enter 'blabla#blabla.com'
Selector [ng\:model="form.email"] did not match any elements.
Any suggestion?
check to make sure that you have:
browser().navigateTo('/');
Without navigating first angular does not have any reference to the DOM.
You can also use :
pause();
To see exactly what the browser is displaying at the given time when running an e2e test.