Improve clicking with modifier(s) #486
Comments
jennifer-shehane
added
pkg/driver
|
Hi Chris.. is it also possible to do this when there isn't any textfield? |
|
The first example above works for a non-textfield. |
|
The workaround didn't work for me. The |
|
@fr0, // type ctrl+a on body
cy.get('body').type('{ctrl}a') |
|
Yes, I figured out that As a side note, when I'm writing tests, I don't really want to have to think about these sorts of things. It would be nice if there were an API that was simply "press/release these keys exactly as if the user had done it", much like |
|
Can you describe in more detail what your test is doing that requires |
That's not what I've experienced. Try these two tests, which (IMO) should both pass. However, only the second one does. it('handles keydown (via type)', () => {
let shiftPressed = false;
cy.window().then(win => {
win.addEventListener('keydown', ev => {
if (ev.key === 'shift') {
shiftPressed = true;
}
});
});
cy.get('body').type('{shift}', {release: false}).then(() => {
expect(shiftPressed).to.be.true;
});
});
it('handles keydown (via trigger)', () => {
let shiftPressed = false;
cy.window().then(win => {
win.addEventListener('keydown', ev => {
if (ev.key === 'shift') {
shiftPressed = true;
}
});
});
cy.get('body').trigger('keydown', {key: 'shift'}).then(() => {
expect(shiftPressed).to.be.true;
});
}); |
|
I see. Thanks for the information. This looks like a bug in how |
jennifer-shehane
added
the
stage: ready for work
|
I created this custom command, in case is helpful for others, or to know if there are any caveats here, if I'm shooting myself in the foot or anything like it (just devised it and seems to work well, but who knows, especially the hack to be able to use it inside Cypress.Commands.add(
"clickWithModifier",
{ prevSubject: "element" },
(subject, modifier) => {
// Make sure we can get the body even if inside a .within block
cy.document().then($doc => {
// Type the modifier into <body /> without releasing it
const body = $doc.querySelector("body")
cy.wrap(body).type(modifier, { release: false })
})
// Click the element while the modifier key is pressed
cy.wrap(subject).click()
cy.document().then($doc => {
// Release the modifier key, again against <body />
cy.wrap($doc.querySelector("body")).type(modifier)
})
}
)Use it like this: cy.findByText("Hello world").clickWithModifier("{shift}") |
cypress-bot
bot
added
stage: work in progress
stage: needs review
|
The code for this is done in cypress-io/cypress#8114, but has yet to be released. |
cypress-bot
bot
added
stage: pending release
and removed
stage: needs review
|
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
The current experience issuing a ctrl-click , cmd-click, etc could use some improvement.
First, add a section to the
cy.clickdoc concerning modifiers, with an example or two.Second, consider updating the
cy.clickcommand to accept modifiers directly instead of needingcy.typecommand first.Currently you need this to ctrl-click:
Something like this would be a lot better:
The text was updated successfully, but these errors were encountered: