Mixing
How to type in movable fields
I have a little problem in writing my test.
Most of fields on my website I can fill only with "type" element. But there are fields that don't want to fill. But it looks like (in Cypress) that it's OK. They are movable with arrows as shown in the image below.
When I'm in playground and I want to get that field it looks like this:
Cypress gets that field but don't want to type in it (than should element tells me that it's OK).
Code:
.cy.get('[data-bind="validationElement: yearOfManufacture"] > .col-sm-4 > .k-widget > .k-numeric-wrap > .k-formatted-value')
.type('2016')
.should('have.value', '2016')
Is there someone who knows what to do?
This is how it (DOM in dev-tools) looks like:
<input type="text" class="k-formatted-value w-100 k-input"
title="" tabindex="0" role="spinbutton" aria-valuemin="1900"
aria-valuemax="2018" autocomplete="off" aria-disabled="false"
style="display: inline-block;">
testing types automation cypress
edited Nov 21 '18 at 5:51
BSMP
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
|
show 6 more comments
I have a little problem in writing my test.
Most of fields on my website I can fill only with "type" element. But there are fields that don't want to fill. But it looks like (in Cypress) that it's OK. They are movable with arrows as shown in the image below.
When I'm in playground and I want to get that field it looks like this:
Cypress gets that field but don't want to type in it (than should element tells me that it's OK).
Code:
.cy.get('[data-bind="validationElement: yearOfManufacture"] > .col-sm-4 > .k-widget > .k-numeric-wrap > .k-formatted-value')
.type('2016')
.should('have.value', '2016')
Is there someone who knows what to do?
This is how it (DOM in dev-tools) looks like:
<input type="text" class="k-formatted-value w-100 k-input"
title="" tabindex="0" role="spinbutton" aria-valuemin="1900"
aria-valuemax="2018" autocomplete="off" aria-disabled="false"
style="display: inline-block;">
testing types automation cypress
edited Nov 21 '18 at 5:51
BSMP
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then usecy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.
– eric99
Nov 18 '18 at 19:09
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38
|
show 6 more comments
I have a little problem in writing my test.
Most of fields on my website I can fill only with "type" element. But there are fields that don't want to fill. But it looks like (in Cypress) that it's OK. They are movable with arrows as shown in the image below.
When I'm in playground and I want to get that field it looks like this:
Cypress gets that field but don't want to type in it (than should element tells me that it's OK).
Code:
.cy.get('[data-bind="validationElement: yearOfManufacture"] > .col-sm-4 > .k-widget > .k-numeric-wrap > .k-formatted-value')
.type('2016')
.should('have.value', '2016')
Is there someone who knows what to do?
This is how it (DOM in dev-tools) looks like:
<input type="text" class="k-formatted-value w-100 k-input"
title="" tabindex="0" role="spinbutton" aria-valuemin="1900"
aria-valuemax="2018" autocomplete="off" aria-disabled="false"
style="display: inline-block;">
testing types automation cypress
edited Nov 21 '18 at 5:51
BSMP
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
I have a little problem in writing my test.
Most of fields on my website I can fill only with "type" element. But there are fields that don't want to fill. But it looks like (in Cypress) that it's OK. They are movable with arrows as shown in the image below.
When I'm in playground and I want to get that field it looks like this:
Cypress gets that field but don't want to type in it (than should element tells me that it's OK).
Code:
.cy.get('[data-bind="validationElement: yearOfManufacture"] > .col-sm-4 > .k-widget > .k-numeric-wrap > .k-formatted-value')
.type('2016')
.should('have.value', '2016')
Is there someone who knows what to do?
This is how it (DOM in dev-tools) looks like:
<input type="text" class="k-formatted-value w-100 k-input"
title="" tabindex="0" role="spinbutton" aria-valuemin="1900"
aria-valuemax="2018" autocomplete="off" aria-disabled="false"
style="display: inline-block;">
testing types automation cypress
testing types automation cypress
edited Nov 21 '18 at 5:51
BSMP
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
edited Nov 21 '18 at 5:51
BSMP
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
edited Nov 21 '18 at 5:51
BSMP
2,60952435
edited Nov 21 '18 at 5:51
BSMP
2,60952435
edited Nov 21 '18 at 5:51
BSMP
2,60952435
2,60952435
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
asked Nov 18 '18 at 12:11
Dominik SkálaDominik Skála
227
227
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then usecy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.
– eric99
Nov 18 '18 at 19:09
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38
|
show 6 more comments
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then usecy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.
– eric99
Nov 18 '18 at 19:09
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then use
cy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.– eric99
Nov 18 '18 at 19:09
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then use
cy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.– eric99
Nov 18 '18 at 19:09
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38
|
show 6 more comments
1 Answer
1
active
oldest
votes
The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',
It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.
This is the test that works for the demo page, I hope it will work for your page as well
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');
const initialValue = '$30.00'
const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
.should('have.value', initialValue)
.focus()
const editInput = displayInput.parent()
.children('.k-input')
.eq(1) // get the 2nd input of this parent, not the first
const newValue = '2016'
editInput
.clear()
.type(newValue)
.should('have.value', newValue)
})
})
answered Nov 21 '18 at 7:54
eric99eric99
349310
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53360714%2fhow-to-type-in-movable-fields%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',
It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.
This is the test that works for the demo page, I hope it will work for your page as well
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');
const initialValue = '$30.00'
const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
.should('have.value', initialValue)
.focus()
const editInput = displayInput.parent()
.children('.k-input')
.eq(1) // get the 2nd input of this parent, not the first
const newValue = '2016'
editInput
.clear()
.type(newValue)
.should('have.value', newValue)
})
})
answered Nov 21 '18 at 7:54
eric99eric99
349310
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
add a comment |
The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',
It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.
This is the test that works for the demo page, I hope it will work for your page as well
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');
const initialValue = '$30.00'
const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
.should('have.value', initialValue)
.focus()
const editInput = displayInput.parent()
.children('.k-input')
.eq(1) // get the 2nd input of this parent, not the first
const newValue = '2016'
editInput
.clear()
.type(newValue)
.should('have.value', newValue)
})
})
answered Nov 21 '18 at 7:54
eric99eric99
349310
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
add a comment |
The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',
It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.
This is the test that works for the demo page, I hope it will work for your page as well
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');
const initialValue = '$30.00'
const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
.should('have.value', initialValue)
.focus()
const editInput = displayInput.parent()
.children('.k-input')
.eq(1) // get the 2nd input of this parent, not the first
const newValue = '2016'
editInput
.clear()
.type(newValue)
.should('have.value', newValue)
})
})
answered Nov 21 '18 at 7:54
eric99eric99
349310
The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',
It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.
This is the test that works for the demo page, I hope it will work for your page as well
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');
const initialValue = '$30.00'
const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
.should('have.value', initialValue)
.focus()
const editInput = displayInput.parent()
.children('.k-input')
.eq(1) // get the 2nd input of this parent, not the first
const newValue = '2016'
editInput
.clear()
.type(newValue)
.should('have.value', newValue)
})
})
answered Nov 21 '18 at 7:54
eric99eric99
349310
answered Nov 21 '18 at 7:54
eric99eric99
349310
answered Nov 21 '18 at 7:54
eric99eric99
349310
answered Nov 21 '18 at 7:54
eric99eric99
349310
349310
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
add a comment |
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
Thank you very much!
– Dominik Skála
Nov 21 '18 at 17:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53360714%2fhow-to-type-in-movable-fields%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you want to click the arrows in the test, perhaps use the Selector Playground to hover over the arrows to find their selctor, then use
cy.get('arrow-selector-here').click(). But some more complex controls are difficult to select in Cypress, so it may not be possible.– eric99
Nov 18 '18 at 19:09
Thanks for your reply but this is not what I'm looking for. I know that I can click on that arrow but I need to fill that field with number over 40000 so that need a lot of clicks. I need to write text it in.
– Dominik Skála
Nov 19 '18 at 8:48
Ah, I got the question back-to-front. That selector looks very complicated. Another way to find a different selector is to right-click, inspect element and see what the DOM looks like in dev tools. I typically use a class name, but it depends on the particular page. If you could post a section of DOM we can help further.
– eric99
Nov 19 '18 at 9:15
From the class names, it looks like Kendo UI is used to make the page.
– eric99
Nov 19 '18 at 9:17
This is how it looks like: <div class="k-animation-container" style="width: 31px; height: 24px; overflow: hidden; top: 891px; z-index: 10002; left: 565px; box-sizing: content-box; display: none; position: absolute;" aria-hidden="true"><div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute; opacity: 0;" aria-hidden="true"><div class="k-tooltip-content"><div class="z-popover-technical-card"><div class="popover-content"><img alt="Technický průkaz" src="/images/technicak-zadni.jpg"><div class="area area-vin">
– Dominik Skála
Nov 20 '18 at 16:38