cy.within support

[npeterkamps]

• cypress-testing-library version: 2.0.0
• node version: 8.4.0
• npm version: 5.3.0

Relevant code or config

cy
  .getByLabelText("Label text")
  .getFormByTitle("Form title") // custom command
  .within(() => {
// select editor with the same label as the previous getByLabelText, but nested in the form
    cy.getByLabelText("Label text") 
  })

Philosophy

There's nothing to guarantee that label texts are unique within the page. Users will be filling out a form one section at a time. The form can have a title to indicate to the user what they should be filling in, while the label texts themselves are no different to another form with a different title.

So to mimic how the user would fill in the page, you'd look for the form with that title and look for label texts within that form section.

Problem description:

Cypress supports a within function. All cy statements within the within function scope should use its subject as the container.

Currently, cypress-testing-library always uses the window.document as container.

Suggested solution:

Check cy.state("withinSubject") (Cypress source) to check whether the query is being executed within a within function scope and use it instead of doc as container parameter to query functions.

[kentcdodds]

I definitely want this 👍

[sabin-bhattarai-cko]

The following code does not work

cy.get("contextText").within(() => {
    cy.getByLabelText("labelForDropdown")
      .click({ force: true })
      .getByText("Hello")
      .click({ force: true });
  });

Only by adding the cy.wait(5000) works. I thought the within would wait automatically.

cy.get("contextText").within(() => {
    cy.wait(5000);
    cy.getByLabelText("labelForDropdown")
      .click({ force: true })
      .getByText("Hello")
      .click({ force: true });
  });

[alexkrolick]

Isn't the click with force preventing the retry from doing it's validation on "failed" click attempts?

[mwmcode]

is this supported now?