Develop Reference

Changing form label (No ID or class) via script

I have a form in one of my apps:
<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>
I have the ability to run a custom script in the header or the body of the page, and I would like to change the label from "Email" to "Company email".
Any suggestions?
Thanks

To match an element by its contents you'll need to use XPath.
let emailLabels = document.evaluate( "//div[contains(#class, 'custom-form-field')]/label[contains(., 'Email')]", document, null, XPathResult.ANY_TYPE, null );
let label = emailLabels.iterateNext();
label.innerText = "Company Email";
<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>

If you want to use native javascript, can try this:
<div class="custom-form-field"><label>Email<span class="required-asterix"></span></label><input name="email" class="email " type="email" placeholder="Work Email" tabindex="0" value=""></div>
<script>
custom_field = document.getElementsByClassName('custom-form-field');
custom_field[0].children[0].outerText = 'Company Email';
</script>

Input Password PrimeNG only works after clicking on the input

I have the following problem when using ngprime, when the page loads the input is buggy. If I click on the input it is correct, according to the second photo.
Can you help me with this?
I installed prime flex, prime ng. I imported the styles in angular.json
formulario: FormGroup = this.fb.group({
email: [null, [Validators.email, Validators.required]],
password: [null, Validators.required]
});
<form [formGroup]="formulario" class="p-fluid mt-5">
<fieldset class="field">
<label for="password" class="block">Email</label>
<span class="p-input-icon-left my-2">
<i class="pi pi-user"></i>
<input id="email" formControlName="email" type="email" pInputText placeholder="Email">
</span>
</fieldset>
<fieldset class="field mt-2">
<label for="password" class="block">Password</label>
<p-password id="password" formControlName="password" [toggleMask]="true" promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte">
</p-password>
</fieldset>
</form>

It appears to be a known bug in the component. You can see the thread on GitHub here.
There's a workaround until they fix it. Add the following attribute to the p-password element:
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
Like this:
<p-password id="password"
[toggleMask]="true"
promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte"
styleClass="p-password p-component p-inputwrapper p-input-icon-right">
</p-password>

Why is my form not returning an alert when password does not match the confirm password field Javascript?

So I'm new to JS, and I'm trying to make this form prevent submission if password does not match the confirm password field. However, when I enter in 2 different passwords, I don't get an alert like I've coded in the script below. Any thoughts? For reference, the form was built w/ bootstrap.
<form class="form-signin">
<div class="form-label-group">
<input type="text" id="fullName" class="form-control" placeholder="Username" required autofocus>
<label for="fullName">Full name</label>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
<label for="inputEmail">Work email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
<label for="inputConfirmPassword">Confirm password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" id ="register-btn" type="submit">Register</button>
<hr class="my-4">
<div class="registration-login">
<p class="already-have__account">Already have an account?</p> Login
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="registration__section">
<h2>Innovative supply chain teams use Rumi to manage scalable and sustainable packaging.
</h2>
</div>
<script>
var form = document.getElementById('form-signin');
form.onsubmit = function() {
if (inputPassword.value !== inputConfirmPassword.value) {
alert("Your passwords don't match");
return false;
}
else {
return true;
}
}

Just a minor mistake.
You are using get getElementById.
var form = document.getElementById('form-signin');
There is no id with 'form-signin',
<form class="form-signin">
Rename the class to id.
<form id="form-signin">
Check out this (JSFiddle). It's working here.

How to find the element corresponding to particular object using cypress?

I have just started with Cypress and it got my attention. However, when I try to be more specific with my testing I am finding it hard. The page which I am trying to automate has a form which looks like this:
<form>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Email address</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="email" placeholder="Enter your email address" type="email" class="MuiInputBase-input MuiInput-input" value=""></div>
<p class="MuiFormHelperText-root Mui-error">Please enter a valid email address</p>
</div>
</div>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Password</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="password" placeholder="Enter your password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
<p class="MuiFormHelperText-root Mui-error">Password should have minimum of 8 chars.</p>
</div>
</div>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false">Confirm password</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" name="password_confirm" placeholder="Confirm password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
</div>
</div>
<div class="form-group pt-2 mb-4">By clicking the <strong>Create account</strong> button below you agree to our terms of service and privacy statement.</div>
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained mb-5 MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge" tabindex="0" type="submit"><span class="MuiButton-label">Create Account</span><span class="MuiTouchRipple-root"></span></button>
</form>
Here I have error messages associated to 'email' and 'password' fields, both elements in a under respective 's.
I can validate the error messages by using below statement easily:
cy.get('p').contains('Please enter a valid email address')
and
cy.get('p').contains('Password should have minimum of 8 chars')
But what I want to do is, get the element and find the child of my div element and then get the text of my element.
Why I want to do this is to make sure that the error message that I am trying to validate actually corresponds to my test element.
How can I achieve it?
Thanks in advance!

You can do this by traversing the DOM from your helper text:
cy.get("p")
.contains("Please enter a valid email address")
.then(($el) => {
expect($el.siblings("label").text()).to.eq("Email address");
});
cy.get("p")
.contains("Password should have minimum of 8 chars")
.then(($el) => {
expect($el.siblings("label").text()).to.eq("Password");
});

JQuery code I wrote stopped working, is there anywrong I've overlooked?

For the below code I want the content of the submit button with the .btn-primary attribute to change to "Success!" only if the input fields are all not null.
At preset the code goes straight to success when the button is press whether or not the fields have content.
I thought it might be because the fields may somehow already have a value that is not null so I ran this code: alert($('#Comment').attr("value")); and it returned undefined in the alert message. Undefined is the same as null in js/jquery isn't it?
I got this code to work earlier and it was typed almost the same way with just a few changes. I undid the changes but it still does not work.
Any help will be appreciated. (If anyone knows this) Are there instances in which the same code could not work at a different time, all things being equal?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
$(document).ready(function () {
var Fname = $('#FirstName').attr("value");
var Lname = $('#LastName').attr("value");
var Email = $('#Email').attr("value");
var Comment = $('#Comment').attr("value");
$(".btn-primary").click(function () //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE."
{
if (Fname != null && Lname != null && Email != null && Comment != null)
{
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
</script>
And this is the html on the same page
<form class="form-horizontal" role="form" action="/Home/Contact" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName"/>
<span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com"/>
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>

When your document loads you are storing the value of Fname, Lname ..... so on. The issue is you then use these values in your conditional test but the values will not have changed as they are just the raw value from the first time the page loaded. One quick fix would be to bring these inside the click so on every click they can re evaluated
Also when checking you are only checking for null but these are not going to equal null anyway. Better would be to fully validate them or just test for generic truthy which excludes the falsy values such as null, undefined, empty string
$(document).ready(function () {
$(".btn-primary").click(function (e)
{
var Fname = $('#FirstName').val();
var Lname = $('#LastName').val();
var Email = $('#Email').val();
var Comment = $('#Comment').val();
//ADDED JUST TO STOP THE FORM SUBMITTING
e.preventDefault();
//very quick test but this could be a lot more detailed for true validation on each field
if (Fname && Lname && Email && Comment) {
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
<form class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" />
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>