Feature/retryability

example/.eslintrc

@@ -2,7 +2,8 @@
  "extends": "airbnb-base",
  "plugins": ["cypress", "prettier"],
  "env": {
- "browser": true
+ "browser": true,
+ "cypress/globals": true
  },
  "rules": {
  "prettier/prettier": "error",

example/cypress/integration/todolist.spec.js

@@ -60,4 +60,10 @@ describe('Todo List', () => {
  expect($el.value).to.equal(QUERY);
  });
  });
+
+ it('finds asynchronously added shadow DOM element', () => {
+ cy.shadowGet('todo-list-item', { timeout: 6000 })
+ .shadowFind('label')
+ .shadowContains('async item');
+ });
 });

example/src/components/todo-form/todo-form.js

@@ -18,6 +18,7 @@ export default class TodoForm extends HTMLElement {
  this.inputEl = this.root.querySelector('input');
 
  this.formEl.addEventListener('submit', this.handleSubmit.bind(this));
+ // eslint-disable-next-line no-console
  this.inputEl.addEventListener('change', e => console.log('change occurred', e));
  }
 

example/src/index.html

@@ -10,5 +10,13 @@
  <h1>Todo list</h1>
  <todo-list></todo-list>
  <script src="./index.js"></script>
+ <script>
+ setTimeout(() => {
+ const el = document.createElement('todo-list-item');
+ el.setAttribute('title', 'async item');
+ el.setAttribute('done', false);
+ document.body.appendChild(el);
+ }, 5000);
+ </script>
  </body>
 </html>

index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="cypress" />
+
 declare namespace Cypress {
  type EventOptions = {
  log?: Boolean;
@@ -8,13 +10,17 @@ declare namespace Cypress {
  composed?: Boolean;
  };
 
+ type CommandOptions = {
+ timeout?: Number;
+ };
+
  interface Chainable<Subject> {
  shadowClick(options?: EventOptions): Chainable<Subject>;
  shadowContains(content: string): Chainable<Subject>;
  shadowEq(index: number): Chainable<Subject>;
- shadowFind(selector: string): Chainable<Subject>;
+ shadowFind(selector: string, options: CommandOptions): Chainable<Subject>;
  shadowFirst(): Chainable<Subject>;
- shadowGet(selector: string): Chainable<Subject>;
+ shadowGet(selector: string, options: CommandOptions): Chainable<Subject>;
  shadowLast(): Chainable<Subject>;
  shadowTrigger(eventName: string, eventOptions?: EventOptions): Chainable<Subject>;
  shadowType(content: string): Chainable<Subject>;

src/commands/shadowFind/command.js

@@ -1,20 +1,27 @@
-import { validateElement, validateSelector, validateSubject } from '../../validators';
+import { validateSelector, validateSubject } from '../../validators';
+import resolveValue from '../../helpers/resolveValue';
 
-export default function shadowFind(subject, selector) {
+export default function shadowFind(subject, selector, options) {
  validateSubject(subject);
  validateSelector(selector);
 
- const currentElement = subject[0].shadowRoot || subject[0];
- const foundElements = currentElement.querySelectorAll(selector);
- validateElement(foundElements[0]);
+ const elGetter = () => {
+  const currentElement = subject[0].shadowRoot || subject[0];
+  const found = currentElement.querySelectorAll(selector);
 
- Cypress.log({
- name: 'shadowFind',
- message: `'${selector}'`,
- consoleProps: () => ({
- selector,
- }),
- });
+ return found;
+ };
+
+ return resolveValue(elGetter, options).then(foundElements => {
+ Cypress.log({
+ name: 'shadowFind',
+ message: `'${selector}'`,
+ consoleProps: () => ({
+ selector,
+ foundElements,
+ }),
+ });
 
- return Cypress.cy.wrap(foundElements, { log: false });
+ return foundElements;
+ });
 }

src/commands/shadowGet/command.js

@@ -1,16 +1,25 @@
-import { validateElement, validateSelector } from '../../validators';
+import { validateSelector } from '../../validators';
+import resolveValue from '../../helpers/resolveValue';
 
-export default selector => {
+export default (selector, options) => {
  validateSelector(selector);
 
- const element = Cypress.$(selector);
- validateElement(element);
-
- Cypress.log({
- name: 'shadowGet',
- message: `'${selector}'`,
- consoleProps: () => ({ selector }),
+ Cypress._.defaults(options, {
+ log: true,
+ timeout: 10000,
  });
 
- return element;
+ const elGetter = () => {
+ return Cypress.$(selector);
+ };
+
+ return resolveValue(elGetter, options).then(element => {
+ Cypress.log({
+ name: 'shadowGet',
+ message: `'${selector}'`,
+ consoleProps: () => ({ selector, element }),
+ });
+
+ return element;
+ });
 };

src/helpers/resolveValue.js

@@ -0,0 +1,7 @@
+export default function resolveValue(valueGetterFn, options = {}) {
+ return Cypress.Promise.try(valueGetterFn).then(value => {
+ return Cypress.cy.verifyUpcomingAssertions(value, options, {
+ onRetry: () => resolveValue(valueGetterFn, options),
+ });
+ });
+}