I am starting to learn Cypress after few years working with Selenium. In Selenium i'm regularly using GetAttribute() method. As an exercise i'm trying to do the same with Cypress, to print class attribute value from the following HTML element:
<input class="form-control ng-touched ng-pristine ng-valid" max="21" min="1" type="number">
This is my code:
cy.log(cy.get('input').invoke('attr', 'class'));
Output:
log Object{5}
I tried to use Lakitna cypress-commands (https://github.com/Lakitna/cypress-commands) with the code:
cy.log(cy.get('input').attribute('class'));
Output:
cy commands are asynchronous so for logging you need to use .then:
cy.get('input').then(($input) => {
cy.log($input.attr('class'));
});
or
// with assertion
cy.get('input').should('have.attr', 'class').then(cy.log);
If you are looking for the value of the html tag and you end up here, this is the simplest way to do that:
cy.get(`[data-testid="${key}"]`).then(($input) => {
if($input.prop('nodeName') === "SELECT") {
//Select corresponding input to value provided in dropdown lists
} else {
//Input each value provided into each field
cy.get(`[data-testid="${key}"]`).clear().should('have.value', '').type(testMachine[key]).should('have.value', testMachine[key])
}
Related
in my html i can able to add more fields using jquery and the field am generating is check box array. i need to retrieve this in my controller.
so far i have tried
<input type="checkbox" value="1" name="washing[]" id="washing[]">
<input type="checkbox" value="1" name="dryclean[]" id="dryclean[]">
In controller
$clothtypeid = $request->input('clothtypeid');
$washing = $request->input('washing');
$pressing = $request->input('pressing');
for($i=0;$i<count($clothtypeid);$i++){
//in here how to test if the checkbox is ticked then value=1 else 0 ??
}
I expect if the checkbox is ticked then i have to make 1 else 0
Thanks in Advance
So I did a bit of digging and found this Tutorial which suggests;
Setting the input type to "checkbox" like you did there..
Keep the same name and include the '[]' at the end of the name attribute so that you have the following in your form;
<input type="checkbox" name="check_list[]" value="washing">
<input type="checkbox" name="check_list[]" value="dryclean">
Then in the controller you can get the value by doing the following;
if(!empty($request['check_list'])){
// Loop through array to get the checked values.
foreach($request['check_list'] as $item){
//do something here like;
if($item == 'washing'){ //make db operation or assign to a variable..}
else if($item == 'dryclean'){//make db operation}
}
}
This is a very basic example as you can see and I have to say that I haven't tested it yet but I believe it will work. Try it and give feedback.
EDIT: There is an answer here
Having trouble understanding the syntax in redux-form...
In redux-docs
const renderField = (field) => (
<div className="input-row">
<input {...field.input} type="text"/>
{field.meta.touched && field.meta.error &&
<span className="error">{field.meta.error}</span>}
</div> )
How is the spread operator used inside the input and why does the following returnes an error:
<input {...field.input, id} type="text"/>
The second syntax I dont understand is:
class MyCustomInput extends Component {
render() {
const { input: { value, onChange } } = this.props <---??
return (
<div>
<span>The current value is {value}.</span>
<button type="button" onClick={() => onChange(value + 1)}>Inc</button>
<button type="button" onClick={() => onChange(value - 1)}>Dec</button>
</div>
)
}
}
What is:
input: { value, onChange }
?
Queston 1:
The error from using {...field.input, id} should be something like the following:
Syntax error: ...: Unexpected token, expected }
If you already have props as an object, and you want to pass it in
JSX, you can use ... as a “spread” operator to pass the whole props
object (Spread Attributes)
So it appears the JSX attribute spread is not exactly the same as a es2015 spread. I believe it is limited to just the examples in the react docs.
Question 2:
The Field component passes these props to your wrapped component MyCustomInput
input.onChange(eventOrValue) : Function
A function to call when the form field is changed. It expects to either receive the React SyntheticEvent or the new value of the field.
input.value: any
The value of this form field. It will be a boolean for checkboxes, and a string for all other input types. If there is no value in the Redux state for this field, it will default to ''. This is to ensure that the input is controlled. If you require that the value be of another type (e.g. Date or Number), you must provide initialValues to your form with the desired type of this field.
In other words when MyCustomInput fires onChange the Field component will dispatch an action to update the form store.
The value prop is used to maintain the state MyCustomInput.
I'm collaborating in a Meteorjs app, in wich i'm at first tries.
I builded some very simple templates to fit my needs.
In my code it happens that i have to check the value of a input text.
So i setup an event on that text box.
this is the text input:
<input type="text" name="meName" id="mockupName" />
<input type="button" {{buttonDisabled}} id="mockupCreate" value="New Mockup" />
The event check the text value and disable or enable the button. Very straight forward.
this is the event:
'keydown #mockupName': function(e) {
if (e.target.value.trim() == '') {
Session.set('buttonDisabled','disabled');
} else {
Session.set('buttonDisabled','');
}
},
It works just ok.
e.target has a reference to my text input, and value store its value.
Now i referenced this template from another page, in a big template i wrote:
{{#if mockupSelected}}
<input type="button" id="sw_product" value="switch to product view" />
{{> mockupEditor}}
{{else}}
Select product from the left
{{/if}}
And actually when mockupSelected returns true my template appears.
The event is not working anymore.
When the event fire ( and it fires ) i do a console.log(e.target)
Before i was getting: <input#mockupName> a reference to my input.
Now i m getting: Object { __impl4cf1e782hg__: <input#mockupName>, parentNode_: undefined, firstChild_: undefined, lastChild_: undefined, nextSibling_: undefined, previousSibling_: undefined, treeScope_: Object }
An object with a series of properties, one of which contains my reference.
This is the list of meteor packages installed:
meteor-platform
natestrauser:cart
http
iron:router
accounts-base
accounts-password
accounts-ui
alanning:roles
aldeed:autoform
aldeed:collection2
twbs:bootstrap
jeremy:velocity-animate
ajduke:bootstrap-tokenfield
sergeyt:typeahead
standard-app-packages
babrahams:editable-text-wysiwyg-bootstrap-3
differential:vulcanize
dburles:collection-helpers
fortawesome:fontawesome
yogiben:admin
I would like to know how i can access to that text input, considering that i do not know that key and that getElementById is returning me the same object.
I could iterate over all the object properties and testing if one of the values is actually a nodeElement of type text, but i do not think this is a solution.
Can anyone tell me how to get back to the normal behaviour?
I'm guessing here but have you tried:
.html
<input type="text" name="meName" id="mockupName" class="mockupName" />
<input type="button" {{buttonDisabled}} id="mockupCreate" value="New Mockup" />
.js
'keydown .mockupName': function(e) {
if (e.target.value.trim() == '') {
Session.set('buttonDisabled','disabled');
} else {
Session.set('buttonDisabled','');
}
},
either that, or try changing the name of the control (mockupname -> uniqueMockupName). I had strange behaviour once when there were duplicate field names.
I have this code and it worked for a few minutes. However I reloaded my page and now I cannot get it to work and I cannot figure out why. Any help would be much appreciated.
Code:
<form>
<input type="text" id="test">
<input type="button" value="test" onclick="check(this.form)">
<script lang="JavaScript">
function check(form) {
if (form.test.indexOf("yes")) {
alert("play sound");
}
else {
alert("no sound");
}
}
</script>
</form>
When I tested your code in Google Chrome's Javascript console, I got Typeerror: cannot read property 'test' of undefined. It looks like you're trying to validate the user input in the input box, but whatever value entered needs to be referenced in your code before finding the string segment of that string with the indexOf ().
Here's a jsFiddle of showing you how to get the user input value with jQuery.
Use jQuery's val() method or Javascript's value() method to get the user input, then you can use indexOf method to find the string segments
var arr=["random","Javascript","donuts","closures"];
$(document).ready(function() {
$("#myForm").submit(function(e){
e.preventDefault();
var userInput=$("#userInput").val();
if($.inArray(userInput,arr) != -1){
alert("success");
}
})
});
In my cshtml file i have the following call
#foreach( var EducationPlan in Model.Fields) {
#HtmlHelper.EditorFor(m => EducationPlan, "ViewFieldInputWithHidden")
}
and in ViewFieldInputWithHidden.cshtml i have
#HtmlHelper.TextBox(Model.MemberName, Model.Value, Model.HtmlAttributes)
#HtmlHelper.Hidden(Model.MemberName, Model.Value, new { id = Model.MemberName + "_Hidden" })
This gives me, with unimportant stuff removed
<input id="EducationPlan_ResponsiblePerson" name="EducationPlan.ResponsiblePerson" type="text">
<input id="ResponsiblePerson_Hidden" name="EducationPlan.ResponsiblePerson" type="hidden">
Is there any way to emulate/use the same value as the TextBox uses to get the "EducationPlan" string with me when i write the id? Or is there, even better, just a way to append the "_Hidden" to the id.
I found the solution and i'm leaving it here for other who runs into the same problem.
Replacing the hidden with the following code helped:
#Html.Hidden(Model.MemberName, Model.Value, new { id = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(Model.MemberName) + "_Hidden" })
So, basically the TemplateInfo class saves the expression in some way.