In Cypress how to select input element based on name? - javascript

I'm starting to learn Cypress. I want to select the input field and provide the phone number by using cypress.io. The code I have following but it does not work. However can I using find or there is another way to get the input element to type in phone number?
cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')
<div class="required field">
<label>Phone Number</label>
<div title="Teacher number" class="ui fluid right labeled input no-spinners">
<input required="" type="number" name="teacher[0].number" value="">
<div class="ui label label">US</div>
</div>
</div>

Why don't you directly target the input field using the following code
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel
HTML:
<input required="" type="tel" name="teacher[0].number" value="">
Cypress:
describe('Trial', function() {
it('Test', function() {
cy.visit('http://localhost:8080/trials/')
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});
Test Result:

Try this instead:
cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')
The first argument to contains tells cypress to find the element with that selector that contains the text.

I write selectors with the input tag as below and it worked for me.
cy.get('input[name="elementName"]').type(val)
Check this to learn best practices when selecting elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

Related

A field of Angular template driven forms considered invalid even though the regExp matches

I have this input:
<div class="form-group">
<label for="power">Hero Power</label>
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="text"
class="form-control" pattern="^[0-9]+$"id="powerNumber">
<div [hidden]="powerNumber.valid" class="alert alert-danger">
power must be a number
</div>
</div>
I have added a pattern validator to the input field (only number should pass the test). Below the input I have added an error message that should hidden when the input field is valid. However it shows even when I have entered a value that matches the pattern RegExp. What am I doing wrong?
Here is a Stackblitz demonstration https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts
add #powerNumber="ngModel" template reference to input ngModel and all will be working. It is already done with name input in your example
I don't know whether it is eligible for you, however you can use input just for numbers:
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number"
class="form-control" id="powerNumber">

Is there a way to disable chrome autofill option for angular form fields

I have tried using autocomplete false and also auto complete off. The cache is removed from the field, but iam still seeing chrome autofill data. Is there a way to disable chrome autofill option in angular forms? Any suggestions would be appreciated. Thanks
Please check the autocomplete="new-password":
<input type="password" name="password" value="" autocomplete="new-password" />
It worked for me. Found in Google documentation
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Through some trial and error testing, it appears that if you set the input name and autocomplete attributes to a random string, Chrome's autofill is prevented from appearing. I created a small directive to achieve this.
import { Directive, ElementRef, Renderer2, AfterViewInit } from '#angular/core';
#Directive({
selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {
constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }
ngAfterViewInit() {
const randomString = Math.random().toString(36).slice(-6);
this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
}
}
Just change your input from type TEXT to type SEARCH.
<input type="search" name="your_address" autocomplete="nope" />
Chrome fill work with text fields but it's ignored on search type.
Chrome seems to ignore all practical/clean attempts to stop this - so we need to get a little hacky. I prevented this using 2 honeypot inputs. They can NOT be "display:none" or they will get skipped. So I wrapped them in a div that's height:0; overflow:hidden; and gave them opacity 0 (just to be double sure). Your real inputs must come AFTER the honeypots. See below
<!-- honeypot prevents chrome user autofill bs-->
<div style="height:0; overflow:hidden">
<input style="opacity:0;" type="email" value="" class="" />
<input style="opacity:0;" type="password" value="" class="d-" />
</div>
<!-- end honeypot -->
<!-- ... then put your real inputs after-->
<input type="email" name="email" value="" class="" />
<input type="password" name="password" value="" class="d-" />
<!-- end honeypot -->
Disabling autocompletion
To disable autocompletion in forms, you can set the autocomplete attribute to "off":
You can do this either for an entire form, or for specific input elements in a form:
<form [formGroup]="exampleForm" autocomplete="off">
...
</form>
// or
<form [formGroup]="exampleForm">
<div>
<label >Credit card:</label>
<input type="text" id="cc" name="cc" autocomplete="off">
</div>
</form>
To Disable in Login Fields:
many modern browsers do not support autocomplete="off" for login fields:
to prevent autofilling of password fields, you can use
autocomplete="new-password"
I had similar issue, I was not able to resolved it with any of the solution maybe because I was using third party for Google places Autocomplete ngx-google-places-autocomplete
where autofill overlapping google suggested address. I was able to resolve it using focus event as shown below
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
type="text" class="form-control" id="address1"
formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">
setAutoFillOff(event: any) {
if (event) {
event.target.attributes['autocomplete'].value = 'chrome-off';
}
}
I am putting out this to helps who might be in similar situation.
It appears that autocomplete="off" can be used directly on form tag.
Useful when you have a lot of text inputs
<form [formGroup]="vmForm" autocomplete="off">
Google Chrome Version 78.0.3904.108
TLDR; Don't label your inputs with obvious names or Chrome will pick that up and autofill the input.
I often use a form-group class to wrap my labels and inputs together, pretty common practice. So much so the only way I found to get around AutoFill in Chrome (Angular 8, Chrome v80) was to change the value of my label for the input.
Turns Off AutoFill:
<div class="form-group">
<label for="aRandomPlace" class="form-group-label">Pickup Location</label>
<input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>
Does Not Turn Off AutoFill:
<div class="form-group">
<label for="address" class="form-group-label">Pickup Address</label>
<input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>
I believe we are discussing to disable 'autosuggestions' not 'autocomplete'
"Autocomplete=off" works for the text type input field but the browser ignores it if it is password type. there are lot many suggestions to use "Autocomplete='chrome-off', 'new-password'" but these are not meant to disable autosuggestions.
for these, I prefer masking technique to mask the content.
.autocompleteOff{
-webkit-text-security: disc;
}
<input class='autocompleteOff' type=text>
Just add to all the HTML input tag which is being auto filled within a form tag as bellow:
<input type="text" class="form-control" id="inputId"
name="inputName" autocomplete="new-inputName"
[(ngModel)]="model">
Note: Use "new-form_element_name" as autocomplete property as shown above.
It worked for me!!!
I found the answer in documentation and it works like a charm.
You can find more about it here.
<input type="text" autocomplete="off" name="one-time-code" id="one-time-code">
Usually what I do is I change type of input dynamically for example in Angular:
[type]="(field.length > 0)? 'password' : 'text'"
In this manner, the browser is unable to recognise the password field the first time you click it and will not provide a suggestion. However, if the field value has been input once and then erased, the browser will provide a suggestion. (At least it is not providing suggestion for the first time).

Select with Intern over CSS Selector ID Input Field

Hey i want to select with Intern over CSS Selector ID this input field and put some text in.
<div class="controls input-group has-success">
<input id="billingAddress.firstName" class="form-control valid" type="text" required="" value="" name="billingAddress.firstName" from="1..3" placeholder="" autocomplete="given-name">
I try this commands but nothing works for me:
findByCssSelector('form input[name=billingAddress.firstName]')
findByCssSelector('form input[name="billingAddress.firstName"]')
findByCssSelector('form input[ID=billingAddress.firstName]')
findByCssSelector('form input[ID="billingAddress.firstName"]')
findByCssSelector('input#billingAddress\\.firstName')
findById('billingAddress\.firstName')
findById('billingAddress\\.firstName')
Example Code:
findById('billingAddress\.firstName')
.click()
.type('test')
.sleep(200)
.end()
Could anyone possibly help me with that problem.
Thank you everybody for looking in my problem.
For findByCssSelector using attributes, the attribute value should be quoted, like:
.findByCssSelector('input[id="billingAddress.firstName"]')
For findById, you don't need to escape periods (the ID is just a string, not a regex):
.findById('billingAddress.firstName')
In a quick test with your HTML snippet, both of these work.

Select all text in textbox when label is clicked

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>
I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

Highlight text between form inputs?

I have a form that is validated by js when the user submits it. My code detects empty and invalid fields (ex 1 number in phone number is obviously an invalid phone number).
I am asked if i could highlight fields missing or in error. I think this would be cool IF i can do it automatically. With HTML like the below how can i make name, phone or whatever else turn red? i cant think of any solution. Maybe i can pull the html body from form find the target input and insert a div on the left side of the input to the prev tag and use that div to make the font red. But i HATE that idea because that requires poking the HTML instead of DOM and i am pretty sure some nastiness will occur. Any ideas?
Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>
Change your HTML to have the <label> surrounding the 'Name' and 'Phone', which will make it more accessible and provide the functionality you're looking for.
HTML
<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
jQuery
​$('input').blur(function() {
$('label[for="'+$(this).attr('name')+'"]').css('color','red');
});​​​​
Live Example
http://jsfiddle.net/tve8J/
You'll of course have to add your validation, I don't know what you consider and 'invalid field'
You should rather write your HTML to have an element around the labels in the first place. The correct HTML would be
<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />
Then just add a class to the label to turn it red when it should.
By the way, this even makes the input receive focus when the label is clicked! Yay!
such as:
//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';
?
How about labels with the for attribute? - Check out its documentation here

Categories

Resources