I'm trying to check the value of the value field inside a div.
this value is not reflected to a string or a int in the div value, only in his attribute:
<input as-automation="" type="text" placeholder="Put the initial value here" value="999.99">
please look a value of 999.99, how can I reach it? I tried valueof, contains, eq, nothing worked..
I want to find the way to reach this value by cypress.
You should be able to reference the element's value by the key value, either through the Chai assertion (via cy.should()) or in cy.its().
cy.get('input').should('have.value', '999.99');
...
cy.get('input').its('value').then((value) => {
// other code where you do something with the `value` variable
})
There are a few ways to check it.
const value = "999.99";
cy.get("input").should("have.value", value);
cy.get("input").should(($input) => {
const val = $input.val();
expect(val).to.eq(value);
});
cy.get("input").invoke("val").should("eq", value);
Here is a working example.
Another way to do this is:
cy.get('input').should('have.attr', 'value', '999.99')
Related
So i have a b-form-select with a v-model i need to change dynamically my issue is when i change the v-model to another element of the list the :options are taken from the selected value doesn't change
Code example :
<b-form-select :options="ListA" v-model="Depart" value-field="Livreur" text-field="Livreur"></b-form-select>
data(){
Depart:'',
ListA:[],
}
my method is simply :
function(){
this.Depart = this.ListA[0]
}
the list is structured as such :
this.ListA.push({Livreur:"example",id:0})
as far as i know it should change the selected value of the b-form-select but instead nothing at all happens , any ideas ? thank you in advance
Your value-field should probably be id not Livreur, except if Livreur is a unique identifier as well.
Relevant part in the documentation: https://bootstrap-vue.org/docs/components/form-select#changing-the-option-field-names
this.Depart should also not be an object, but the value of the identifier you chose in the value-field property. In your case it should be:
if value-field is id:
this.Depart = this.ListA[0].id
if value-field is Livreur:
this.Depart = this.ListA[0].Livreur
I am desparately trying to understand what's wrong there and can't figure it out!
I'll try to explain as best as I can, but the code is lengthy and I can't post it easily.
I have a component called "FrameHeader" that includes an input checkbox. This component is called in another component called "Frame", and the frames made from a v-for in another component ("FrameContainer").
In FrameHeader template, I have this:
<input :key="'frame-touchselectbox-'+frameId" type="checkbox"
v-model="touchSelected"
:class="{hidden: !isTouchSelectOn, selectCheckBox: true}"
/>
touchSelected is a computed property defined as such:
computed: {
touchSelected() {
console.log("checking frame touch selected for frame " + this.frameId + " ==> " + store.getters.isFrameTouchSelected(this.frameId));
return store.getters.isFrameTouchSelected(this.frameId);
},
},
where store.getters.isFrameTouchSelected(this.frameId); retrieves a boolean property called "touchSelected" in an object of the state:
The idea is that in the scenario I have, all "touchSelected" properties are first set to false (A), then only the one from one of the frame is set to true (B).
(A):
toggleTouchSelect(state, payload: {frameId: number; toggle: boolean}) {
const newCandidates: number[] = (payload.toggle) ? getAllSiblings(state.frameObjects, payload.frameId): [];
Object.keys(state.frameObjects).forEach((frameKey) => {
Vue.set(
state.frameObjects[parseInt(frameKey)],
"touchSelected",
false
);
Vue.set(
state.frameObjects[parseInt(frameKey)],
"isTouchSelectOn",
newCandidates.includes(parseInt(frameKey))
);
});
},
(B):
touchSelectFrame(state, payload: {frameId: number; isSelected: boolean}) {
Vue.set(
state.frameObjects[payload.frameId],
"touchSelected",
payload.isSelected
);
},
The data I get in the store is correct, I get false/true values where I want them.
However, the checkboxes are not correct. The first time I set one of the frame's property to "true", the corresponding checkbox gets checked. But when I get another frame's property to "true", the previous frame's checkbox doesn't get unchecked. Actually, I see it first being unchecked, then being checked again.
As I said, the data in the state is correct: even when that checkbox revert to checked, the underlying property in the data for that frame is "false".
BUT the weirdest thing is that if only change the checkbox input to a text input (changing the type of the input in the template), the text value is always correct even after the second time I set a frame's property to "true".
So...i'm totally puzzled and can't understand what's happening with those checkboxes.
Sorry for the vague explanation I hope it can still be understandable and that someone will shed a light on that :) Thanks a lot.
Computed props are by default getter-only (reference). That means your checkbox can read the value of touchSelected but can't change its value. You have to use a computed prop with a getter AND a setter. Assuming you have a mutation to change your frameId logic in Vuex:
computed: {
touchSelected: {
get(): {
return store.getters.isFrameTouchSelected(this.frameId);
}
set(newValue): {
store.commit('FRAME_MUTATION', newValue);
}
}
},
Is it possible to clear the input text (e.g. "qweqweqweqwe" in the example below) of the (Fluent/Fabric) NormalPeoplePicker programmatically?
I have tried accessing the input element (via the onBlur event) and attempted to change it's value and innerHtml but that doesn't work. Also, that doesn't seem to be a good way of doing it.
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
NormalPeoplePicker Component keep input value inside state and its not possible to change it directly:
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
}
}}
/>
From Official Documentation inside implementation section there is useful method updateValue which allows to change the input value.
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current._updateValue("");
}
}}
/>
Codepen working example ln: 104.
Note:
This is a temporary solution, test every use case before production.
let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}
This way the tagpicker property will always be selected with an empty item.
I want to get the Attribute value and store in a variable how we can achieve this in cypress
In my case I want to get the complete class value and store it in variable.
This code just give me the attribute class value but how I can store the fetch value in variable
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
I was trying to compare the style of one element with another to make sure they were equal. Here's the code that seems to work for me.
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.then(($style1) => {
const style1 = $style1
})
A good way to solve this kind of scenario is to use the alias mechanism. One could leverage this functionality to enqueue multiple elements and then check all of them together by chaining the results. I've recently come to a case in an SPA where the assertion had to happen between elements that were spread across different angular routes (call them different pages).
In your use case, this would like:
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.as('style_1')
cy.get('.another-element')
.invoke('attr', 'style')
.as('style_2')
// later on for example you could do
cy.get('#style_1').then(style_1 => {
cy.get('#style_2').then(style_2 => {
// Both values are available and any kind of assertion can be performed
expect(style_1).to.include(style_2)
});
});
This is described in Variables and Aliases section of the Cypress Documentation.
Here is how I got the value of for attribute in a label tag which had text "Eat" inside.
cy.contains('Eat').then(($label) => {
const id = $label.attr('for');
}
Most important thing is to get the selector right, so it exactly finds the value you are looking for. In this case you already found it. By using then() gives you the ability to store it in a variable.
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
.then($growl-message => {
const message = $growl-message.text()
//do the checks with the variable message. For example:
cy.contains(message)
})
Note that the scope of the variable is within the curly brackets. Thus using the variable has to be within those curly brackets.
I want to push values in array and pass these values as options of select tag. I did following,
used plugin
import DropDown, {
Select,
Option,
OptionList,
} from 'react-native-selectme';
assigned state as
this.state = {company:[]};
pushing in this array as
for(let i in data.companyRecord)
company.push(data.companyRecord[i].companyname);
and assigning to select tag as
<Select
width={250}
ref="SELECT1"
optionListRef={this._getOptionList.bind(this)}
defaultValue="Select a Company ..."
onSelect={this._company.bind(this)} asyncOptions={this.state.company}>
</Select>
But it is not working. It is showing that
undefined is not an object('evaluating children.length').
Please help me solving this issue.
You can't edit the state like that.
const tempNames = [];
for(let i in data.companyRecord)
tempNames.push(data.companyRecord[i].companyname);
this.setState({ company: tempNames });
Now your state will have the correct values.
But there might still be some problem, because your error might suggest that this.state.company is undefined, however you correctly assigned this.state.company to an empty array before.
This could be due to this.state is undefined. Are you defining your selector in a own created function? And not in your class own render method? In that case you need to bind this to your method.
renderSelector() {
return (<Select
width={250}
ref="SELECT1"
optionListRef={this._getOptionList.bind(this)}
defaultValue="Select a Company ..."
onSelect={this._company.bind(this)} asyncOptions={this.state.company}>
</Select>);
}
In your constructor you need to bind "this" to that method. Like this:
this.renderSelector = this.renderSelector.bind(this);