115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
/// <reference types="Cypress" />
|
|
|
|
context("Querying", () => {
|
|
beforeEach(() => {
|
|
cy.visit("https://example.cypress.io/commands/querying");
|
|
});
|
|
|
|
// The most commonly used query is 'cy.get()', you can
|
|
// think of this like the '$' in jQuery
|
|
|
|
it("cy.get() - query DOM elements", () => {
|
|
// https://on.cypress.io/get
|
|
|
|
cy.get("#query-btn").should("contain", "Button");
|
|
|
|
cy.get(".query-btn").should("contain", "Button");
|
|
|
|
cy.get("#querying .well>button:first").should("contain", "Button");
|
|
// ↲
|
|
// Use CSS selectors just like jQuery
|
|
|
|
cy.get('[data-test-id="test-example"]').should("have.class", "example");
|
|
|
|
// 'cy.get()' yields jQuery object, you can get its attribute
|
|
// by invoking `.attr()` method
|
|
cy.get('[data-test-id="test-example"]')
|
|
.invoke("attr", "data-test-id")
|
|
.should("equal", "test-example");
|
|
|
|
// or you can get element's CSS property
|
|
cy.get('[data-test-id="test-example"]')
|
|
.invoke("css", "position")
|
|
.should("equal", "static");
|
|
|
|
// or use assertions directly during 'cy.get()'
|
|
// https://on.cypress.io/assertions
|
|
cy.get('[data-test-id="test-example"]')
|
|
.should("have.attr", "data-test-id", "test-example")
|
|
.and("have.css", "position", "static");
|
|
});
|
|
|
|
it("cy.contains() - query DOM elements with matching content", () => {
|
|
// https://on.cypress.io/contains
|
|
cy.get(".query-list")
|
|
.contains("bananas")
|
|
.should("have.class", "third");
|
|
|
|
// we can pass a regexp to `.contains()`
|
|
cy.get(".query-list")
|
|
.contains(/^b\w+/)
|
|
.should("have.class", "third");
|
|
|
|
cy.get(".query-list")
|
|
.contains("apples")
|
|
.should("have.class", "first");
|
|
|
|
// passing a selector to contains will
|
|
// yield the selector containing the text
|
|
cy.get("#querying")
|
|
.contains("ul", "oranges")
|
|
.should("have.class", "query-list");
|
|
|
|
cy.get(".query-button")
|
|
.contains("Save Form")
|
|
.should("have.class", "btn");
|
|
});
|
|
|
|
it(".within() - query DOM elements within a specific element", () => {
|
|
// https://on.cypress.io/within
|
|
cy.get(".query-form").within(() => {
|
|
cy.get("input:first").should("have.attr", "placeholder", "Email");
|
|
cy.get("input:last").should("have.attr", "placeholder", "Password");
|
|
});
|
|
});
|
|
|
|
it("cy.root() - query the root DOM element", () => {
|
|
// https://on.cypress.io/root
|
|
|
|
// By default, root is the document
|
|
cy.root().should("match", "html");
|
|
|
|
cy.get(".query-ul").within(() => {
|
|
// In this within, the root is now the ul DOM element
|
|
cy.root().should("have.class", "query-ul");
|
|
});
|
|
});
|
|
|
|
it("best practices - selecting elements", () => {
|
|
// https://on.cypress.io/best-practices#Selecting-Elements
|
|
cy.get("[data-cy=best-practices-selecting-elements]").within(() => {
|
|
// Worst - too generic, no context
|
|
cy.get("button").click();
|
|
|
|
// Bad. Coupled to styling. Highly subject to change.
|
|
cy.get(".btn.btn-large").click();
|
|
|
|
// Average. Coupled to the `name` attribute which has HTML semantics.
|
|
cy.get("[name=submission]").click();
|
|
|
|
// Better. But still coupled to styling or JS event listeners.
|
|
cy.get("#main").click();
|
|
|
|
// Slightly better. Uses an ID but also ensures the element
|
|
// has an ARIA role attribute
|
|
cy.get("#main[role=button]").click();
|
|
|
|
// Much better. But still coupled to text content that may change.
|
|
cy.contains("Submit").click();
|
|
|
|
// Best. Insulated from all changes.
|
|
cy.get("[data-cy=submit]").click();
|
|
});
|
|
});
|
|
});
|