@vardot/varbase-e2e 2.0.0

package/tests/step-definitions/keyboard.steps.js

@@ -0,0 +1,112 @@
+'use strict';
+
+const { friendly } = require('./varbase-e2e');
+
+// Simulate keyboard interactions on the page or on a specific element.
+
+const { When } = require('@cucumber/cucumber');
+
+// Common name aliases — lowercase names like "enter", "tab".
+function normalizeKey(key) {
+  const map = {
+    enter: 'Enter', return: 'Enter', tab: 'Tab', escape: 'Escape', esc: 'Escape',
+    space: 'Space', backspace: 'Backspace', delete: 'Delete',
+    up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight',
+    home: 'Home', end: 'End', pageup: 'PageUp', pagedown: 'PageDown',
+  };
+  const lower = key.toLowerCase();
+  return map[lower] || key;
+}
+
+/**
+ * Press a single key against the page (whatever element is currently focused).
+ *
+ * Common aliases (`enter`, `tab`, `esc`, `space`, `up/down/left/right`) are
+ * normalised to Playwright's canonical key names.
+ *
+ * Example #1: When I press the key "Enter"
+ * Example #2: When I press the key "Escape"
+ * Example #3: And I press the key "Tab"
+ * Example #4: When I press the key "ArrowDown"
+ * Example #5: When I focus on the element "#search"
+ *               And I press the key "Enter"
+ *
+ */
+When(/^(I |we )*press the key "([^"]*)"$/, async function (pronoun, key) {
+  try {
+    await this.page.keyboard.press(normalizeKey(key));
+  } catch (e) {
+    throw friendly({
+      action: `press the key "${key}"`,
+      cause: e,
+      hint: `use a real key name like Enter, Escape, Tab, ArrowDown, or a short alias (enter, esc, tab, up, down, left, right, space).`,
+    });
+  }
+});
+
+/**
+ * Press a single key while a specific element is focused.
+ *
+ * Example #1: When I press the key "Enter" on the element "#search"
+ * Example #2: When I press the key "Tab" on the element "input[type=email]"
+ * Example #3: And I press the key "ArrowDown" on the element ".combobox"
+ * Example #4: When I press the key "Backspace" on the element "#name"
+ * Example #5: When I press the key "Escape" on the element "[role=dialog]"
+ *
+ */
+When(/^(I |we )*press the key "([^"]*)" on the element "([^"]*)"$/, async function (pronoun, key, sel) {
+  try {
+    await this.page.locator(sel).first().press(normalizeKey(key));
+  } catch (e) {
+    throw friendly({
+      action: `press the key "${key}" on "${sel}"`,
+      cause: e,
+      hint: `check that "${sel}" matches an element on the page that can be focused (input, button, link).`,
+    });
+  }
+});
+
+/**
+ * Press a key combination against the page. Combos use `+` between modifiers
+ * and the final key (e.g. `Control+a`, `Meta+s`, `Shift+Tab`).
+ *
+ * Example #1: When I press the keys "Control+a"
+ * Example #2: When I press the keys "Meta+s"
+ * Example #3: And I press the keys "Shift+Tab"
+ * Example #4: When I press the keys "Alt+ArrowLeft"
+ * Example #5: When I press the keys "Control+Shift+P"
+ *
+ */
+When(/^(I |we )*press the keys "([^"]*)"$/, async function (pronoun, keys) {
+  try {
+    await this.page.keyboard.press(keys);
+  } catch (e) {
+    throw friendly({
+      action: `press the keys "${keys}"`,
+      cause: e,
+      hint: `use a "+" between modifier and key, e.g. "Control+a", "Meta+s", or "Shift+Tab".`,
+    });
+  }
+});
+
+/**
+ * Press a key combination while a specific element is focused.
+ *
+ * Example #1: When I press the keys "Control+a" on the element "#editor"
+ * Example #2: When I press the keys "Meta+s" on the element "form"
+ * Example #3: And I press the keys "Shift+Tab" on the element "#email"
+ * Example #4: When I press the keys "Control+Enter" on the element "#message"
+ * Example #5: When I press the keys "Alt+Down" on the element ".combobox"
+ *
+ */
+When(/^(I |we )*press the keys "([^"]*)" on the element "([^"]*)"$/, async function (pronoun, keys, sel) {
+  try {
+    await this.page.locator(sel).first().press(keys);
+  } catch (e) {
+    throw friendly({
+      action: `press "${keys}" on "${sel}"`,
+      cause: e,
+      hint: `check the element exists and use "+" between modifier and key, e.g. "Control+s".`,
+    });
+  }
+});

package/tests/step-definitions/link.steps.js

@@ -0,0 +1,142 @@
+'use strict';
+
+// Link existence + href + title assertions.
+
+const { When, Then } = require('@cucumber/cucumber');
+const assert = require('assert');
+
+function linkSelector(text) {
+  return `a:has-text("${text}")`;
+}
+
+/**
+ * Assert a link with the given visible text and an href containing a fragment exists.
+ *
+ * Example #1: Then the link "About" with the href "/about" should exist
+ * Example #2: Then the link "Sign in" with the href "/login" should exist
+ * Example #3: And the link "Pricing" with the href "/pricing" should exist
+ * Example #4: Then the link "Docs" with the href "docs.example.com" should exist
+ * Example #5: Then the link "Contact" with the href "/contact-us" should exist
+ *
+ */
+Then('the link {string} with the href {string} should exist', async function (text, href) {
+  const loc = this.page.locator(`${linkSelector(text)}[href*="${href}"]`);
+  assert.ok(await loc.count() > 0, `Link "${text}" with href containing "${href}" not found.`);
+});
+
+/**
+ * Assert a link exists inside a specific parent element.
+ *
+ * Example #1: Then the link "Home" with the href "/" within the element "#main-nav" should exist
+ * Example #2: Then the link "Privacy" with the href "/privacy" within the element "footer" should exist
+ * Example #3: And the link "Sign in" with the href "/login" within the element ".header" should exist
+ * Example #4: Then the link "Docs" with the href "/docs" within the element "nav" should exist
+ * Example #5: Then the link "Pricing" with the href "/pricing" within the element ".cta-block" should exist
+ *
+ */
+Then('the link {string} with the href {string} within the element {string} should exist', async function (text, href, parent) {
+  const loc = this.page.locator(`${parent} ${linkSelector(text)}[href*="${href}"]`);
+  assert.ok(await loc.count() > 0, `Link "${text}" with href containing "${href}" not found within "${parent}".`);
+});
+
+/**
+ * Assert NO link with the given visible text and href fragment exists.
+ *
+ * Example #1: Then the link "Sign in" with the href "/login" should not exist
+ * Example #2: Then the link "Admin" with the href "/admin" should not exist
+ * Example #3: And the link "Old docs" with the href "/v1/docs" should not exist
+ * Example #4: Then the link "Logout" with the href "/logout" should not exist
+ * Example #5: Then the link "Beta" with the href "/beta" should not exist
+ *
+ */
+Then('the link {string} with the href {string} should not exist', async function (text, href) {
+  const loc = this.page.locator(`${linkSelector(text)}[href*="${href}"]`);
+  assert.strictEqual(await loc.count(), 0, `Link "${text}" with href containing "${href}" should not exist.`);
+});
+
+/**
+ * Assert NO link with text+href exists inside a specific parent element.
+ *
+ * Example #1: Then the link "Logout" with the href "/logout" within the element ".guest-nav" should not exist
+ * Example #2: Then the link "Admin" with the href "/admin" within the element "footer" should not exist
+ * Example #3: And the link "Beta" with the href "/beta" within the element "#main-nav" should not exist
+ * Example #4: Then the link "Old" with the href "/v1" within the element ".breadcrumb" should not exist
+ * Example #5: Then the link "Internal" with the href "/internal" within the element ".public-nav" should not exist
+ *
+ */
+Then('the link {string} with the href {string} within the element {string} should not exist', async function (text, href, parent) {
+  const loc = this.page.locator(`${parent} ${linkSelector(text)}[href*="${href}"]`);
+  assert.strictEqual(await loc.count(), 0, `Link "${text}" with href containing "${href}" should not exist within "${parent}".`);
+});
+
+/**
+ * Assert at least one link has the exact `title` attribute.
+ *
+ * Example #1: Then the link with the title "Open menu" should exist
+ * Example #2: Then the link with the title "Edit profile" should exist
+ * Example #3: And the link with the title "Download PDF" should exist
+ * Example #4: Then the link with the title "Print page" should exist
+ * Example #5: Then the link with the title "Sign in" should exist
+ *
+ */
+Then('the link with the title {string} should exist', async function (title) {
+  assert.ok(await this.page.locator(`a[title="${title}"]`).count() > 0, `Link with title "${title}" not found.`);
+});
+
+/**
+ * Assert NO link has the given exact `title` attribute.
+ *
+ * Example #1: Then the link with the title "Delete user" should not exist
+ * Example #2: Then the link with the title "Open admin" should not exist
+ * Example #3: And the link with the title "Edit billing" should not exist
+ * Example #4: Then the link with the title "Sign out" should not exist
+ * Example #5: Then the link with the title "Reveal secret" should not exist
+ *
+ */
+Then('the link with the title {string} should not exist', async function (title) {
+  assert.strictEqual(await this.page.locator(`a[title="${title}"]`).count(), 0, `Link with title "${title}" should not exist.`);
+});
+
+/**
+ * Assert a link's href is absolute (starts with `http://` or `https://`).
+ *
+ * Example #1: Then the link "Twitter" should be an absolute link
+ * Example #2: Then the link "GitHub" should be an absolute link
+ * Example #3: And the link "Documentation" should be an absolute link
+ * Example #4: Then the link "Status page" should be an absolute link
+ * Example #5: Then the link "External docs" should be an absolute link
+ *
+ */
+Then('the link {string} should be an absolute link', async function (text) {
+  const href = await this.page.locator(linkSelector(text)).first().getAttribute('href');
+  assert.ok(href && /^https?:\/\//.test(href), `Link "${text}" href "${href}" is not absolute.`);
+});
+
+/**
+ * Assert a link's href is relative (no `http://` / `https://` scheme).
+ *
+ * Example #1: Then the link "Home" should not be an absolute link
+ * Example #2: Then the link "About" should not be an absolute link
+ * Example #3: And the link "Privacy" should not be an absolute link
+ * Example #4: Then the link "Pricing" should not be an absolute link
+ * Example #5: Then the link "Docs" should not be an absolute link
+ *
+ */
+Then('the link {string} should not be an absolute link', async function (text) {
+  const href = await this.page.locator(linkSelector(text)).first().getAttribute('href');
+  assert.ok(href && !/^https?:\/\//.test(href), `Link "${text}" href "${href}" should not be absolute.`);
+});
+
+/**
+ * Click a link addressed by its `title` attribute.
+ *
+ * Example #1: When I click on the link with the title "Open menu"
+ * Example #2: When I click on the link with the title "Edit profile"
+ * Example #3: And we click on the link with the title "Download PDF"
+ * Example #4: When I click on the link with the title "Print page"
+ * Example #5: When I click on the link with the title "Sign in"
+ *
+ */
+When(/^(I |we )*click on the link with the title "([^"]*)"$/, async function (pronoun, title) {
+  await this.page.locator(`a[title="${title}"]`).first().click();
+});

package/tests/step-definitions/metatag.steps.js

@@ -0,0 +1,91 @@
+'use strict';
+
+// Assert <meta> tag presence and contents.
+
+const { Then } = require('@cucumber/cucumber');
+const assert = require('assert');
+
+async function getMetas(page) {
+  return await page.evaluate(() => Array.from(document.querySelectorAll('meta')).map((m) => {
+    const o = {};
+    for (const a of m.attributes) o[a.name] = a.value;
+    return o;
+  }));
+}
+
+function matchAttrs(meta, attrs) {
+  for (const [k, v] of Object.entries(attrs)) {
+    if (meta[k] !== v) return false;
+  }
+  return true;
+}
+
+/**
+ * Assert at least one `<meta>` tag matches every attribute in the data table.
+ *
+ * Example #1: Then the meta tag should exist with the following attributes:
+ *               | name    | description                |
+ *               | content | Documentation site          |
+ * Example #2: Then the meta tag should exist with the following attributes:
+ *               | property | og:title    |
+ *               | content  | Home        |
+ * Example #3: And the meta tag should exist with the following attributes:
+ *               | name    | viewport                          |
+ *               | content | width=device-width, initial-scale=1 |
+ * Example #4: Then the meta tag should exist with the following attributes:
+ *               | name    | robots         |
+ *               | content | noindex,nofollow |
+ * Example #5: Then the meta tag should exist with the following attributes:
+ *               | charset | UTF-8 |
+ *
+ */
+Then('the meta tag should exist with the following attributes:', async function (table) {
+  const want = Object.fromEntries(table.raw());
+  const metas = await getMetas(this.page);
+  assert.ok(metas.some((m) => matchAttrs(m, want)), `No meta tag matching ${JSON.stringify(want)} was found.`);
+});
+
+/**
+ * Assert NO `<meta>` tag matches every attribute in the data table.
+ *
+ * Example #1: Then the meta tag should not exist with the following attributes:
+ *               | name    | description     |
+ *               | content | Coming soon     |
+ * Example #2: Then the meta tag should not exist with the following attributes:
+ *               | name    | robots          |
+ *               | content | noindex         |
+ * Example #3: And the meta tag should not exist with the following attributes:
+ *               | property | og:title       |
+ *               | content  | Placeholder    |
+ * Example #4: Then the meta tag should not exist with the following attributes:
+ *               | http-equiv | refresh       |
+ *               | content    | 5             |
+ * Example #5: Then the meta tag should not exist with the following attributes:
+ *               | name    | author          |
+ *               | content | Anonymous       |
+ *
+ */
+Then('the meta tag should not exist with the following attributes:', async function (table) {
+  const want = Object.fromEntries(table.raw());
+  const metas = await getMetas(this.page);
+  assert.ok(!metas.some((m) => matchAttrs(m, want)), `Meta tag matching ${JSON.stringify(want)} should not exist.`);
+});
+
+/**
+ * Assert the `content` attribute of a named meta tag contains no HTML markup.
+ * Useful for description / open-graph fields that should render as plain text.
+ *
+ * Example #1: Then the "description" meta tag should not contain any HTML tags
+ * Example #2: Then the "og:title" meta tag should not contain any HTML tags
+ * Example #3: And the "twitter:description" meta tag should not contain any HTML tags
+ * Example #4: Then the "keywords" meta tag should not contain any HTML tags
+ * Example #5: Then the "author" meta tag should not contain any HTML tags
+ *
+ */
+Then('the {string} meta tag should not contain any HTML tags', async function (metaName) {
+  const metas = await getMetas(this.page);
+  const m = metas.find((x) => x.name === metaName || x.property === metaName);
+  assert.ok(m, `Meta tag "${metaName}" not found.`);
+  const content = m.content || '';
+  assert.ok(!/<[a-z][\s\S]*>/i.test(content), `Meta tag "${metaName}" contains HTML: ${content}`);
+});

package/tests/step-definitions/modal.steps.js

@@ -0,0 +1,244 @@
+'use strict';
+
+// All modal / dialog step definitions live in this file.
+//
+// Modal element resolution priority:
+//   1. world.__selectorsCss['modal']  (set via the named-selector registry
+//      or the active CMS / framework selector preset)
+//   2. fallback to "[role=\"dialog\"], dialog"
+//
+// Visibility is derived from computed style (display, visibility, opacity)
+// rather than offsetParent — that check is unreliable for fixed-position
+// modal containers. The wait step lives in wait.steps.js.
+
+const { When, Then } = require('@cucumber/cucumber');
+const assert = require('assert');
+const {
+  getModalLocator,
+  findVisibleModal,
+  isAnyModalVisible,
+  waitForModalState,
+  friendly,
+} = require('./varbase-e2e');
+
+// ---------------------------------------------------------------------------
+// Visibility
+// ---------------------------------------------------------------------------
+
+/**
+ * Assert that a modal dialog is visible or not visible on the page.
+ *
+ * Example #1: Then I should see a modal
+ * Example #2: Then I should see the modal
+ * Example #3: Then we should see a modal dialog
+ * Example #4: Then I should not see a modal
+ * Example #5: Then I should not see the modal dialog
+ *
+ */
+Then(/^(I |we )*should( not)* see (a |the )*modal( dialog)*$/, async function (pronounCase, notCase, aTheCase, dialogCase) {
+  const visible = await isAnyModalVisible(this.page, this);
+  if (notCase) {
+    assert.ok(!visible, 'Modal dialog is visible, but it should not be.');
+  } else {
+    assert.ok(visible, 'Modal dialog is not visible, but it should be.');
+  }
+});
+
+/**
+ * Assert that a modal dialog with a given title is visible or not visible.
+ *
+ * Example #1: Then I should see a modal with title "Confirm Action"
+ * Example #2: Then I should see the modal with title "Welcome"
+ * Example #3: Then we should see a modal with title "Welcome Message"
+ * Example #4: Then I should not see a modal with title "Error"
+ * Example #5: Then I should not see the modal with title "Validation Error"
+ *
+ */
+Then(/^(I |we )*should( not)* see (a |the )*modal with title "([^"]*)?"$/, async function (pronounCase, notCase, aTheCase, title) {
+  const modal = getModalLocator(this.page, this);
+  const byHeading = modal.locator('.modal-title, .dialog-title, h1, h2, h3').filter({ hasText: title });
+  const byAttr = modal.locator(`[title*="${title}"], [aria-label*="${title}"]`);
+  const found = await byHeading.count() > 0 || await byAttr.count() > 0;
+  if (notCase) {
+    assert.ok(!found, `Modal with title "${title}" is visible, but it should not be.`);
+  } else {
+    assert.ok(found, `Modal with title "${title}" is not visible or not found.`);
+  }
+});
+
+/**
+ * Assert that a specific modal by id/class/data-modal is visible or not.
+ *
+ * Example #1: Then I should see a "confirmation-modal" modal
+ * Example #2: Then I should see the "#delete-modal" modal
+ * Example #3: Then we should see a "settings-modal" modal
+ * Example #4: Then I should not see a "error-modal" modal
+ * Example #5: Then I should not see the "#success-modal" modal
+ *
+ */
+Then(/^(I |we )*should( not)* see (a |the )*"([^"]*)?" modal$/, async function (pronounCase, notCase, aTheCase, identifier) {
+  const selector = (identifier.startsWith('#') || identifier.startsWith('.'))
+    ? identifier
+    : `#${identifier}, .${identifier}, [data-modal="${identifier}"]`;
+  const visible = await this.page.locator(selector).first().isVisible();
+  if (notCase) {
+    assert.ok(!visible, `Modal "${identifier}" is visible, but it should not be.`);
+  } else {
+    assert.ok(visible, `Modal "${identifier}" is not visible or not found.`);
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Text content
+// ---------------------------------------------------------------------------
+
+/**
+ * Assert that a modal contains or does not contain specific text.
+ *
+ * Example #1: Then I should see "Are you sure?" in the modal
+ * Example #2: Then I should see "Delete this item" in the modal
+ * Example #3: Then we should see "Confirmation required" in the modal dialog
+ * Example #4: Then I should not see "Error occurred" in the modal
+ *
+ */
+Then(/^(I |we )*should( not)* see "([^"]*)?" in( the)* modal( dialog)*$/, async function (pronounCase, notCase, expectedText, theCase, dialogCase) {
+  const found = await getModalLocator(this.page, this).filter({ hasText: expectedText }).count() > 0;
+  if (notCase) {
+    assert.ok(!found, `Found "${expectedText}" in modal, but it should not be there.`);
+  } else {
+    assert.ok(found, `Could not find "${expectedText}" in modal.`);
+  }
+});
+
+/**
+ * Assert that the modal contains the given text (alternate phrasing).
+ *
+ * Distinct from "I should see :text in the modal" — checks plain
+ * `innerText`, ignoring nested layout. Use when the text is part of the
+ * modal body rather than a specific element.
+ *
+ * Example #1: Then the modal should contain "Welcome modal text"
+ * Example #2: Then the modal should contain "Are you sure"
+ * Example #3: And the modal should contain "Order #1234"
+ * Example #4: When I press "Show details"
+ *               Then the modal should contain "Address"
+ * Example #5: Given I am on "/dashboard"
+ *               When I click "Open settings"
+ *               And I wait for the modal to appear
+ *               Then the modal should contain "Preferences"
+ *
+ */
+Then('the modal should contain {string}', async function (text) {
+  const inner = await getModalLocator(this.page, this).first().innerText();
+  assert.ok(inner.indexOf(text) !== -1, `Modal does not contain "${text}". Got: ${inner}`);
+});
+
+/**
+ * Assert that the modal does NOT contain the given text.
+ *
+ * Passes when no modal exists OR when the modal exists but lacks the text.
+ *
+ * Example #1: Then the modal should not contain "Goodbye"
+ * Example #2: Then the modal should not contain "Error"
+ * Example #3: And the modal should not contain "Payment failed"
+ * Example #4: When I close the modal
+ *               Then the modal should not contain "Welcome"
+ * Example #5: When I press "Refresh"
+ *               Then the modal should not contain "Loading"
+ *
+ */
+Then('the modal should not contain {string}', async function (text) {
+  const loc = getModalLocator(this.page, this);
+  const count = await loc.count();
+  if (count === 0) return;
+  const inner = await loc.first().innerText();
+  assert.ok(inner.indexOf(text) === -1, `Modal should not contain "${text}".`);
+});
+
+// ---------------------------------------------------------------------------
+// Interactions
+// ---------------------------------------------------------------------------
+
+/**
+ * Click a button or link inside a modal dialog by its visible text.
+ *
+ * Example #1: When I click "Confirm" in the modal
+ * Example #2: When I click "Cancel" in the modal dialog
+ * Example #3: When we click "OK" button in the modal
+ * Example #4: And I click "Close" in the modal
+ *
+ */
+When(/^(I |we )*click "([^"]*)?"( button)* in( the)* modal( dialog)*$/, async function (pronounCase, buttonText, buttonCase, theCase, dialogCase) {
+  try {
+    await waitForModalState(this.page, 'visible', 10000, this);
+    const modal = await findVisibleModal(this.page, this);
+    await modal.locator('button, a, [role="button"], input[type="button"], input[type="submit"], .btn')
+      .filter({ hasText: buttonText })
+      .first()
+      .click();
+  } catch (e) {
+    throw friendly({
+      action: `click "${buttonText}" in the modal`,
+      cause: e,
+      hint: `make sure the modal is open ("When I wait for the modal to appear") and the button text matches exactly.`,
+    });
+  }
+});
+
+/**
+ * Click a CSS-selector-addressed element inside the active modal.
+ *
+ * Distinct from "click :text in the modal" which uses visible button text.
+ * Use this variant when the target lacks readable text (icon button) or
+ * when text is ambiguous across multiple buttons in the modal.
+ *
+ * Example #1: When I click on "#close-btn" in the modal
+ * Example #2: When I click on ".confirm-delete" in the modal
+ * Example #3: And I click on "[data-testid=accept]" in the modal
+ * Example #4: When I click on "button[aria-label=Close]" in the modal
+ * Example #5: When I press "Open settings"
+ *               And I wait for the modal to appear
+ *               Then I click on "#tab-notifications" in the modal
+ *
+ */
+When(/^(I |we )*click on "([^"]*)" in the modal$/, async function (pronoun, selector) {
+  try {
+    await getModalLocator(this.page, this).locator(selector).first().click();
+  } catch (e) {
+    throw friendly({
+      action: `click on "${selector}" in the modal`,
+      cause: e,
+      hint: `make sure the modal is open and the selector matches something inside it.`,
+    });
+  }
+});
+
+/**
+ * Close or dismiss a modal dialog (uses close button, or Escape fallback).
+ *
+ * Example #1: When I close the modal
+ * Example #2: When I dismiss the modal dialog
+ * Example #3: When we close the modal
+ * Example #4: And I dismiss the modal
+ *
+ */
+When(/^(I |we )*(close|dismiss)( the)* modal( dialog)*$/, async function (pronounCase, closeOrDismiss, theCase, dialogCase) {
+  try {
+    await waitForModalState(this.page, 'visible', 10000, this);
+    const modal = await findVisibleModal(this.page, this);
+    const closeBtn = modal.locator('.close, .modal-close, [data-dismiss="modal"], [aria-label="Close"], .btn-close, button[class*="close"]').first();
+    if (await closeBtn.isVisible()) {
+      await closeBtn.click();
+    } else {
+      await modal.press('Escape');
+    }
+  } catch (e) {
+    throw friendly({
+      action: `${closeOrDismiss} the modal`,
+      cause: e,
+      hint: `the modal had no recognised close button; check it is open or register a custom close-button selector.`,
+    });
+  }
+});
+
+// "When I wait for the modal to appear/disappear" is defined in wait.steps.js.