In CypressIO, we can interact with the keyboard functions with the help of the command type(). Let us understand it with the help of a simple program.
Example program: In this program, we are interacting with the enter key in the keyboard.
describe("keyboard simulation", () => {
it("should submit search box by pressing enter", () => {
cy.visit("http://google.com");
//enter is given within the type().Which means after typing the text hits enter key
cy.get("input[name=q]").type("type something{enter}");
});
});
Output :
Just like the ENTER key, other keys also can be passed inside the type(), they are
| Sequence | Notes |
|---|---|
| {{} | Types the literal { key |
| {backspace} | Deletes character to the left of the cursor |
| {del} | Deletes character to the right of the cursor |
| {downarrow} | Moves cursor down |
| {end} | Moves cursor to the end of the line |
| {enter} | Types the Enter key |
| {esc} | Types the Escape key |
| {home} | Moves cursor to the start of the line |
| {insert} | Inserts character to the right of the cursor |
| {leftarrow} | Moves cursor left |
| {movetoend} | Moves cursor to the end of the typeable element |
| {movetostart} | Moves cursor to the start of the typeable element |
| {pagedown} | Scrolls down |
| {pageup} | Scrolls up |
| {rightarrow} | Moves cursor right |
| {selectall} | Selects all text by creating a selection range |
| {uparrow} | Moves cursor up |
Text passed to .type() may also include any of these modifier character sequences:
| Sequence | Notes |
|---|---|
| {alt} | Activates the altKey modifier. Aliases: {option} |
| {ctrl} | Activates the ctrlKey modifier. Aliases: {control} |
| {meta} | Activates the metaKey modifier. Aliases: {command}, {cmd} |
| {shift} | Activates the shiftKey modifier. |
Sometimes we may need to hover[moving the mouse] on submenus then only we may get the options for the submenu. To perform hover, we should get the CSS of the element and invoke the jQuery method called invoke("show") in Cypress IO.
For example, Sub-menu in the below image shows the option only when you hover your mouse.
In the below example, we are hovering on a sub-menu and selecting the option CherCher Tech, the submenu has class name='dropdown-content'
Example program :
describe("Mouse Hover on submenu", () => {
it("should show submenu options", () => {
Cypress.on("uncaught:exception", (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false;
});
cy.visit("https://chercher.tech/practice/popups");
//show method can be applied only for the immediate parent
cy.get("div.dropdown-content").invoke("show");
cy.contains("CherCher Tech").click();
cy.url().should("include", "chercher.tech");
});
});Output: The program successfully executes and re-directs to another URL.
.click() is the command used to perform, single-click action on a specified element.
Example program :
describe("Handling alerts ", () => {
it("should handle the alerts automatically", () => {
Cypress.on("uncaught:exception", (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false;
});
cy.visit("https://chercher.tech/practice/popups");
cy.get('[name="alert"]').click();
});
});Output :
.dblclick() is the command used to perform the double click on a specified element.
Syntax :
get("").dblclick()
get("").dblclick(options)
get("").dblclick(position)
get("").dblclick(position, options)
get("").dblclick(x, y)
get("").dblclick(x, y, options)Example program :
describe("Mouse simulation", () => {
it("should load website with selectbox", () => {
Cypress.on("uncaught:exception", (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false;
});
cy.visit("https://chercher.tech/practice/popups");
cy.get("#double-click").dblclick();
});
});
Output :
.rightclick() is the command used to perform the right-click action on a specified element.
Syntax :
.rightclick()
.rightclick(options)
.rightclick(position)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)Example program :
describe("Mouse simulation", () => {
it("should load website with selectbox", () => {
Cypress.on("uncaught:exception", (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false;
});
cy.visit("http://swisnl.github.io/jQuery-contextMenu/demo.html");
cy.get(".context-menu-one").rightclick();
});
});
Output :