element", () => {
+ // https://on.cypress.io/select
+
+ // at first, no option should be selected
+ cy.get(".action-select").should("have.value", "--Select a fruit--");
+
+ // Select option(s) with matching text content
+ cy.get(".action-select").select("apples");
+ // confirm the apples were selected
+ // note that each value starts with "fr-" in our HTML
+ cy.get(".action-select").should("have.value", "fr-apples");
+
+ cy.get(".action-select-multiple").select(["apples", "oranges", "bananas"]);
+ cy.get(".action-select-multiple")
+ // when getting multiple values, invoke "val" method first
+ .invoke("val")
+ .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
+
+ // Select option(s) with matching value
+ cy.get(".action-select").select("fr-bananas");
+ cy.get(".action-select")
+ // can attach an assertion right away to the element
+ .should("have.value", "fr-bananas");
+
+ cy.get(".action-select-multiple").select([
+ "fr-apples",
+ "fr-oranges",
+ "fr-bananas",
+ ]);
+ cy.get(".action-select-multiple")
+ .invoke("val")
+ .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
+
+ // assert the selected values include oranges
+ cy.get(".action-select-multiple")
+ .invoke("val")
+ .should("include", "fr-oranges");
+ });
+
+ it(".scrollIntoView() - scroll an element into view", () => {
+ // https://on.cypress.io/scrollintoview
+
+ // normally all of these buttons are hidden,
+ // because they're not within
+ // the viewable area of their parent
+ // (we need to scroll to see them)
+ cy.get("#scroll-horizontal button").should("not.be.visible");
+
+ // scroll the button into view, as if the user had scrolled
+ cy.get("#scroll-horizontal button").scrollIntoView();
+ cy.get("#scroll-horizontal button").should("be.visible");
+
+ cy.get("#scroll-vertical button").should("not.be.visible");
+
+ // Cypress handles the scroll direction needed
+ cy.get("#scroll-vertical button").scrollIntoView();
+ cy.get("#scroll-vertical button").should("be.visible");
+
+ cy.get("#scroll-both button").should("not.be.visible");
+
+ // Cypress knows to scroll to the right and down
+ cy.get("#scroll-both button").scrollIntoView();
+ cy.get("#scroll-both button").should("be.visible");
+ });
+
+ it(".trigger() - trigger an event on a DOM element", () => {
+ // https://on.cypress.io/trigger
+
+ // To interact with a range input (slider)
+ // we need to set its value & trigger the
+ // event to signal it changed
+
+ // Here, we invoke jQuery's val() method to set
+ // the value and trigger the 'change' event
+ cy.get(".trigger-input-range").invoke("val", 25);
+ cy.get(".trigger-input-range").trigger("change");
+ cy.get(".trigger-input-range")
+ .get("input[type=range]")
+ .siblings("p")
+ .should("have.text", "25");
+ });
+
+ it("cy.scrollTo() - scroll the window or element to a position", () => {
+ // https://on.cypress.io/scrollto
+
+ // You can scroll to 9 specific positions of an element:
+ // -----------------------------------
+ // | topLeft top topRight |
+ // | |
+ // | |
+ // | |
+ // | left center right |
+ // | |
+ // | |
+ // | |
+ // | bottomLeft bottom bottomRight |
+ // -----------------------------------
+
+ // if you chain .scrollTo() off of cy, we will
+ // scroll the entire window
+ cy.scrollTo("bottom");
+
+ cy.get("#scrollable-horizontal").scrollTo("right");
+
+ // or you can scroll to a specific coordinate:
+ // (x axis, y axis) in pixels
+ cy.get("#scrollable-vertical").scrollTo(250, 250);
+
+ // or you can scroll to a specific percentage
+ // of the (width, height) of the element
+ cy.get("#scrollable-both").scrollTo("75%", "25%");
+
+ // control the easing of the scroll (default is 'swing')
+ cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
+
+ // control the duration of the scroll (in ms)
+ cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
+ });
+});
diff --git a/cypress/e2e/2-advanced-examples/aliasing.cy.js b/cypress/e2e/2-advanced-examples/aliasing.cy.js
new file mode 100644
index 0000000000..cbf76104fc
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/aliasing.cy.js
@@ -0,0 +1,43 @@
+/// element in various ways
+ .should("have.text", "Column content")
+ .should("contain", "Column content")
+ .should("have.html", "Column content")
+ // chai-jquery uses "is()" to check if element matches selector
+ .should("match", "td")
+ // to match text content against a regular expression
+ // first need to invoke jQuery method text()
+ // and then match using regular expression
+ .invoke("text")
+ .should("match", /column content/i);
+
+ // a better way to check element's text content against a regular expression
+ // is to use "cy.contains"
+ // https://on.cypress.io/contains
+ cy.get(".assertion-table")
+ .find("tbody tr:last")
+ // finds first element with text content matching regular expression
+ .contains("td", /column content/i)
+ .should("be.visible");
+
+ // for more information about asserting element's text
+ // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-elementโs-text-contents
+ });
+
+ it(".and() - chain multiple assertions together", () => {
+ // https://on.cypress.io/and
+ cy.get(".assertions-link")
+ .should("have.class", "active")
+ .and("have.attr", "href")
+ .and("include", "cypress.io");
+ });
+ });
+
+ describe("Explicit Assertions", () => {
+ // https://on.cypress.io/assertions
+ it("expect - make an assertion about a specified subject", () => {
+ // We can use Chai's BDD style assertions
+ expect(true).to.be.true;
+ const o = { foo: "bar" };
+
+ expect(o).to.equal(o);
+ expect(o).to.deep.equal({ foo: "bar" });
+ // matching text using regular expression
+ expect("FooBar").to.match(/bar$/i);
+ });
+
+ it("pass your own callback function to should()", () => {
+ // Pass a function to should that can have any number
+ // of explicit assertions within it.
+ // The ".should(cb)" function will be retried
+ // automatically until it passes all your explicit assertions or times out.
+ cy.get(".assertions-p")
+ .find("p")
+ .should(($p) => {
+ // https://on.cypress.io/$
+ // return an array of texts from all of the p's
+ const texts = $p.map((i, el) => Cypress.$(el).text());
+
+ // jquery map returns jquery object
+ // and .get() convert this to simple array
+ const paragraphs = texts.get();
+
+ // array should have length of 3
+ expect(paragraphs, "has 3 paragraphs").to.have.length(3);
+
+ // use second argument to expect(...) to provide clear
+ // message with each assertion
+ expect(paragraphs, "has expected text in each paragraph").to.deep.eq([
+ "Some text from first p",
+ "More text from second p",
+ "And even more text from third p",
+ ]);
+ });
+ });
+
+ it("finds element by class name regex", () => {
+ cy.get(".docs-header")
+ .find("div")
+ // .should(cb) callback function will be retried
+ .should(($div) => {
+ expect($div).to.have.length(1);
+
+ const className = $div[0].className;
+
+ expect(className).to.match(/heading-/);
+ })
+ // .then(cb) callback is not retried,
+ // it either passes or fails
+ .then(($div) => {
+ expect($div, "text content").to.have.text("Introduction");
+ });
+ });
+
+ it("can throw any error", () => {
+ cy.get(".docs-header")
+ .find("div")
+ .should(($div) => {
+ if ($div.length !== 1) {
+ // you can throw your own errors
+ throw new Error("Did not find 1 element");
+ }
+
+ const className = $div[0].className;
+
+ if (!className.match(/heading-/)) {
+ throw new Error(`Could not find class "heading-" in ${className}`);
+ }
+ });
+ });
+
+ it("matches unknown text between two elements", () => {
+ /**
+ * Text from the first element.
+ * @type {string}
+ */
+ let text;
+
+ /**
+ * Normalizes passed text,
+ * useful before comparing text with spaces and different capitalization.
+ * @param {string} s Text to normalize
+ */
+ const normalizeText = (s) => s.replace(/\s/g, "").toLowerCase();
+
+ cy.get(".two-elements")
+ .find(".first")
+ .then(($first) => {
+ // save text from the first element
+ text = normalizeText($first.text());
+ });
+
+ cy.get(".two-elements")
+ .find(".second")
+ .should(($div) => {
+ // we can massage text before comparing
+ const secondText = normalizeText($div.text());
+
+ expect(secondText, "second text").to.equal(text);
+ });
+ });
+
+ it("assert - assert shape of an object", () => {
+ const person = {
+ name: "Joe",
+ age: 20,
+ };
+
+ assert.isObject(person, "value is object");
+ });
+
+ it("retries the should callback until assertions pass", () => {
+ cy.get("#random-number").should(($div) => {
+ const n = parseFloat($div.text());
+
+ expect(n).to.be.gte(1).and.be.lte(10);
+ });
+ });
+ });
+});
diff --git a/cypress/e2e/2-advanced-examples/connectors.cy.js b/cypress/e2e/2-advanced-examples/connectors.cy.js
new file mode 100644
index 0000000000..aaabcd1338
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/connectors.cy.js
@@ -0,0 +1,96 @@
+///
+ */
+ function waitOneSecond() {
+ // return a promise that resolves after 1 second
+ return new Cypress.Promise((resolve, reject) => {
+ setTimeout(() => {
+ // set waited to true
+ waited = true;
+
+ // resolve with 'foo' string
+ resolve("foo");
+ }, 1000);
+ });
+ }
+
+ cy.then(() => {
+ // return a promise to cy.then() that
+ // is awaited until it resolves
+ return waitOneSecond().then((str) => {
+ expect(str).to.eq("foo");
+ expect(waited).to.be.true;
+ });
+ });
+ });
+});
diff --git a/cypress/e2e/2-advanced-examples/viewport.cy.js b/cypress/e2e/2-advanced-examples/viewport.cy.js
new file mode 100644
index 0000000000..49dd6d6b2c
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/viewport.cy.js
@@ -0,0 +1,58 @@
+///