ruby_raider 3.13.0 → 4.0.0

data/spec/runtime/context_spec.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+require 'rspec'
+require_relative '../../lib/ruby_raider/runtime/context'
+
+RSpec.describe 'Raider::Context' do
+  let(:appium_bridge_class) do
+    stub_const('Appium::Core::Base::Bridge', Class.new(Selenium::WebDriver::Remote::Bridge))
+  end
+
+  def appium_bridge(context)
+    bridge = appium_bridge_class.allocate
+    bridge.define_singleton_method(:current_context) { context }
+    bridge
+  end
+
+  def plain_bridge
+    Selenium::WebDriver::Remote::Bridge.allocate
+  end
+
+  def holder(klass, bridge)
+    klass.allocate.tap { |object| object.instance_variable_set(:@bridge, bridge) }
+  end
+
+  describe '.web?' do
+    it 'is false on an Appium NATIVE_APP context' do
+      expect(Raider::Context.web?(appium_bridge('NATIVE_APP'))).to be(false)
+    end
+
+    it 'is false on NATIVE_APP when a listener wraps the Appium bridge' do
+      wrapped = Selenium::WebDriver::Support::EventFiringBridge.new(appium_bridge('NATIVE_APP'), [])
+      expect(Raider::Context.web?(wrapped)).to be(false)
+    end
+
+    it 'is true on an Appium webview context' do
+      expect(Raider::Context.web?(appium_bridge('WEBVIEW_1'))).to be(true)
+    end
+
+    it 'is true on an Appium CHROMIUM context' do
+      expect(Raider::Context.web?(appium_bridge('CHROMIUM'))).to be(true)
+    end
+
+    it 'is true for a non-Appium bridge without asking current_context' do
+      bridge = plain_bridge
+      expect(bridge).not_to respond_to(:current_context)
+      expect(Raider::Context.web?(bridge)).to be(true)
+    end
+
+    it 'is true for a non-Appium bridge when Appium is not loaded' do
+      expect(Raider::Context.web?(Object.new)).to be(true)
+    end
+  end
+
+  describe '.web_for?' do
+    it 'reads the bridge of a driver' do
+      driver = Selenium::WebDriver::Driver
+      expect(Raider::Context.web_for?(holder(driver, appium_bridge('NATIVE_APP')))).to be(false)
+      expect(Raider::Context.web_for?(holder(driver, appium_bridge('WEBVIEW_1')))).to be(true)
+      expect(Raider::Context.web_for?(holder(driver, plain_bridge))).to be(true)
+    end
+
+    it 'reads the bridge of an element' do
+      element = Selenium::WebDriver::Element
+      expect(Raider::Context.web_for?(holder(element, appium_bridge('NATIVE_APP')))).to be(false)
+      expect(Raider::Context.web_for?(holder(element, appium_bridge('CHROMIUM')))).to be(true)
+      expect(Raider::Context.web_for?(holder(element, plain_bridge))).to be(true)
+    end
+
+    it 'is true when the object has no bridge' do
+      expect(Raider::Context.web_for?(Object.new)).to be(true)
+    end
+  end
+end

data/spec/runtime/errors_spec.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require 'rspec'
+require_relative '../../lib/ruby_raider/runtime/errors'
+
+RSpec.describe 'Raider runtime errors' do
+  after { Raider.reset }
+
+  def fake(tag: 'button', id: nil, klass: nil, text: '')
+    instance_double(Selenium::WebDriver::Element, tag_name: tag, text: text).tap do |element|
+      allow(element).to receive(:attribute).with('id').and_return(id)
+      allow(element).to receive(:attribute).with('class').and_return(klass)
+    end
+  end
+
+  describe 'ancestry' do
+    it 'subclasses the Selenium errors' do
+      expect(Raider::Error.ancestors).to include(StandardError)
+      expect(Raider::AmbiguousMatch.ancestors).to include(Selenium::WebDriver::Error::WebDriverError)
+      expect(Raider::NotActionable.ancestors).to include(Selenium::WebDriver::Error::ElementNotInteractableError)
+      expect(Raider::NotSupported.ancestors).to include(Selenium::WebDriver::Error::UnsupportedOperationError)
+      expect(Raider::TimeoutError.ancestors).to include(Selenium::WebDriver::Error::TimeoutError)
+    end
+  end
+
+  describe Raider::AmbiguousMatch do
+    it 'describes the first three elements and counts the rest' do
+      elements = [fake(id: 'save', text: 'Save'), fake(klass: 'toolbar'), fake, fake]
+      error = described_class.new("by_role('button', name: 'Save')", elements)
+      expect(error.message).to eq(
+        "`by_role('button', name: 'Save')` matched 4 elements: `<button id=\"save\">Save</button>`, " \
+        '`<button class="toolbar">`, `<button>` (+1 more); use find_elements, or narrow the locator'
+      )
+      expect(error.elements).to eq(elements)
+    end
+
+    it 'shows +0 more with three or fewer' do
+      error = described_class.new('x', [fake, fake])
+      expect(error.message).to eq('`x` matched 2 elements: `<button>`, `<button>` (+0 more); ' \
+                                  'use find_elements, or narrow the locator')
+    end
+  end
+
+  describe Raider::NotActionable do
+    it 'reports the check and the covering element' do
+      covering = { element: '<div class="overlay">', x: 412, y: 300 }
+      error = described_class.new('<button id="save">', 'receive events', covering: covering)
+      expect(error.message).to eq('waited 10s for `<button id="save">` to receive events; ' \
+                                  '`<div class="overlay">` covers it at (412, 300)')
+      expect(error.check).to eq('receive events')
+      expect(error.covering).to eq(covering)
+    end
+
+    it 'omits the covering clause' do
+      error = described_class.new('<input id="q">', 'be visible')
+      expect(error.message).to eq('waited 10s for `<input id="q">` to be visible')
+    end
+
+    it 'reports the waited seconds when given' do
+      expect(described_class.new('<a>', 'be visible', waited: 0.25).message).to start_with('waited 0.25s for')
+    end
+
+    it 'formats fractional timeouts' do
+      Raider.timeout = 2.5
+      expect(described_class.new('<a>', 'be visible').message).to start_with('waited 2.5s for')
+    end
+  end
+
+  describe Raider::Describe do
+    it 'formats seconds' do
+      expect([10, 2.5, 10.0, 2.504].map { |value| described_class.seconds(value) }).to eq([10, 2.5, 10, 2.5])
+    end
+
+    it 'limits classes to two and truncates text to 30 characters' do
+      element = fake(klass: 'a b c', text: "  #{'x' * 40}  ")
+      expect(described_class.element(element)).to eq("<button class=\"a b\">#{'x' * 30}</button>")
+    end
+
+    it 'skips empty id and class' do
+      expect(described_class.element(fake(tag: 'div', id: '', klass: ' '))).to eq('<div>')
+    end
+
+    it 'returns <element> on a WebDriver error' do
+      element = instance_double(Selenium::WebDriver::Element)
+      allow(element).to receive(:tag_name).and_raise(Selenium::WebDriver::Error::StaleElementReferenceError)
+      expect(described_class.element(element)).to eq('<element>')
+    end
+  end
+end

data/spec/runtime/finders_spec.rb

@@ -0,0 +1,165 @@
+# frozen_string_literal: true
+
+require 'rspec'
+require_relative '../../lib/ruby_raider/runtime'
+require_relative 'support/fake_bridge'
+
+RSpec.describe 'Raider finders' do
+  let(:bridge) { Raider::Spec::FakeBridge.new }
+  let(:driver) { Raider::Spec.driver(bridge) }
+  let(:search_context) { Selenium::WebDriver::SearchContext }
+
+  before { bridge.enqueue(['a']) }
+
+  it 'registers every Raider key with Selenium' do
+    expect(search_context.finders).to include(Raider::FINDERS)
+  end
+
+  it 'converts label to xpath' do
+    driver.find_element(label: 'Email')
+    expect(bridge.calls.last).to eq([:find_elements_by, 'xpath', Raider::Selectors.label('Email', exact: false), [:driver, nil]])
+  end
+
+  it 'converts text to xpath' do
+    driver.find_element(text: ['Go', { exact: true }])
+    expect(bridge.calls.last[1..2]).to eq(['xpath', Raider::Selectors.text('Go', exact: true)])
+  end
+
+  it 'converts placeholder with exact to css' do
+    driver.find_element(placeholder: ['Name', { exact: true }])
+    expect(bridge.calls.last[1..2]).to eq(['css selector', '[placeholder="Name"]'])
+  end
+
+  it 'converts alt and title to css' do
+    driver.find_element(alt: 'Logo')
+    Raider::Wait.immediately { driver.find_elements(title: 'Help') }
+    expect(bridge.calls.map { |call| call[2] }).to eq(['[alt*="Logo"]', '[title*="Help"]'])
+  end
+
+  it 'converts test_id to an exact css match' do
+    driver.find_element(test_id: 'x')
+    expect(bridge.calls.last[1..2]).to eq(['css selector', Raider::Selectors.test_id('x')])
+  end
+
+  it 'leaves other keys to the inner converter' do
+    driver.find_element(id: 'x')
+    expect(bridge.calls.last[1..2]).to eq(['css selector', '#x'])
+  end
+
+  it 'passes the element ref for an element scope' do
+    element = Selenium::WebDriver::Element.new(bridge, 'root')
+    element.find_element(label: 'Email')
+    expect(bridge.calls.last.last).to eq([:element, 'root'])
+    expect(bridge.calls.last[2].split(' | ')).to all(start_with('.//'))
+  end
+
+  it 'guards the converter role branch with an internal error' do
+    expect { Raider::LocatorConverter.new(nil).convert(Raider::LocatorConverter::ROLE, 'button') }
+      .to raise_error(Raider::NotSupported, /did not intercept/)
+  end
+
+  it 'raises ArgumentError naming the key for a malformed value' do
+    expect { driver.find_element(label: [1, {}]) }.to raise_error(ArgumentError, /label/)
+    expect { driver.find_element(label: %w[a b]) }.to raise_error(ArgumentError, /label/)
+  end
+
+  it 'rejects nil and blank values' do
+    [{ label: nil }, { text: '' }, { placeholder: ['  ', {}] }].each do |locator|
+      expect { driver.find_element(locator) }.to raise_error(ArgumentError, /#{locator.keys.first}: needs a non-empty value/)
+    end
+  end
+
+  describe '.install_converter' do
+    it 'is idempotent' do
+      bridge_class = Selenium::WebDriver::Remote::Bridge
+      before_converter = bridge_class.locator_converter
+      Raider::Finders.install_converter(bridge_class)
+      expect(bridge_class.locator_converter).to equal(before_converter)
+    end
+
+    it 'wraps a plain converter exactly once' do
+      klass = Class.new { class << self; attr_accessor :locator_converter; end }
+      klass.locator_converter = Selenium::WebDriver::Remote::Bridge::LocatorConverter.new
+      2.times { Raider::Finders.install_converter(klass) }
+      expect(klass.locator_converter.inner).not_to be_a(Raider::LocatorConverter)
+    end
+  end
+
+  describe 'with Appium finders assigned after Raider' do
+    around do |example|
+      previous = search_context.extra_finders
+      example.run
+    ensure
+      search_context.extra_finders = previous
+    end
+
+    before do
+      stub_const('Appium::Core::Base::SearchContext::APPIUM_EXTRA_FINDERS', { accessibility_id: 'accessibility id' })
+      search_context.extra_finders = Appium::Core::Base::SearchContext::APPIUM_EXTRA_FINDERS
+    end
+
+    it 'keeps both tables after register' do
+      Raider::Finders.register
+      expect(search_context.finders).to include(:accessibility_id, :label)
+    end
+
+    it 'restores the keys through ensure_registered' do
+      expect(search_context.finders).not_to include(:label)
+      Raider::Finders.ensure_registered
+      expect(search_context.finders).to include(:accessibility_id, :label)
+    end
+  end
+
+  describe '.ensure_registered with a late Appium bridge' do
+    it 'wraps the converter Appium assigned' do
+      appium = stub_const('Appium::Core::Base::Bridge', Class.new(Selenium::WebDriver::Remote::Bridge))
+      inner = Selenium::WebDriver::Remote::Bridge::LocatorConverter.new
+      appium.locator_converter = inner
+      Raider::Finders.ensure_registered
+      expect(appium.locator_converter).to be_a(Raider::LocatorConverter)
+      expect(appium.locator_converter.inner).to equal(inner)
+    end
+  end
+
+  describe 'BiDi bridges' do
+    it 'gives the Selenium BiDi bridge class the Raider converter' do
+      expect(Selenium::WebDriver::Remote::BiDiBridge.locator_converter).to be_a(Raider::LocatorConverter)
+    end
+
+    it 'gives a BiDi bridge instance the Raider converter' do
+      bidi = Raider::Spec.real_bridge(Selenium::WebDriver::Remote::BiDiBridge)
+      expect(bidi.instance_variable_get(:@locator_converter)).to be_a(Raider::LocatorConverter)
+    end
+
+    it 'wraps a late Appium BiDi bridge in ensure_registered' do
+      appium = stub_const('Appium::Core::Base::BiDiBridge', Class.new(Selenium::WebDriver::Remote::BiDiBridge))
+      inner = Selenium::WebDriver::Remote::Bridge::LocatorConverter.new
+      appium.locator_converter = inner
+      Raider::Finders.ensure_registered
+      expect(appium.locator_converter).to be_a(Raider::LocatorConverter)
+      expect(appium.locator_converter.inner).to equal(inner)
+    end
+  end
+
+  describe '.guard' do
+    it 'raises when a bridge already exists' do
+      existing = Selenium::WebDriver::Remote::Bridge.allocate
+      expect { Raider::Finders.guard }.to raise_error(Raider::Error, /before creating the driver/)
+      expect(existing).to be_a(Selenium::WebDriver::Remote::Bridge)
+    end
+  end
+
+  describe '.check_api' do
+    it 'raises when the bridge cannot take a converter' do
+      allow(Selenium::WebDriver::Remote::Bridge).to receive(:respond_to?).and_call_original
+      allow(Selenium::WebDriver::Remote::Bridge).to receive(:respond_to?).with(:locator_converter=).and_return(false)
+      expect { Raider::Finders.check_api }.to raise_error(Raider::Error, /locator_converter=/)
+    end
+
+    it 'raises when SearchContext cannot take extra finders' do
+      allow(search_context).to receive(:respond_to?).and_call_original
+      allow(search_context).to receive(:respond_to?).with(:extra_finders=).and_return(false)
+      expect { Raider::Finders.check_api }.to raise_error(Raider::Error, /extra_finders=/)
+    end
+  end
+end

data/spec/runtime/fixtures/actionability.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Actionability fixture</title>
+  <style>
+    html { overflow-x: hidden; }
+    body { margin: 0; padding: 80px 20px 0; font-family: sans-serif; }
+    #overlay { position: fixed; top: 0; left: 0; width: 220px; height: 60px; background: #c00; opacity: 0.9; z-index: 10; }
+    #covered { position: absolute; top: 10px; left: 10px; width: 120px; height: 30px; }
+    #hidden-display { display: none; }
+    #hidden-visibility { visibility: hidden; }
+    #moving { position: relative; animation: slide 60s linear forwards; }
+    #bouncer { position: absolute; top: 1200px; left: 600px; animation: fall 60s linear forwards; }
+    @keyframes fall { from { transform: translateY(0); } to { transform: translateY(2000px); } }
+    #hidden-box { display: none; }
+    @keyframes slide { from { transform: translateX(0); } to { transform: translateX(3000px); } }
+    #far { position: absolute; top: 3000px; left: 400px; }
+    #sticky-zone { position: absolute; top: 4000px; left: 0; width: 100%; height: 2500px; }
+    #top { position: sticky; top: 0; height: 70vh; background: #036; opacity: 0.9; z-index: 5; }
+    #under-header { position: absolute; top: 1500px; left: 400px; }
+    #scroller { width: 300px; height: 120px; overflow: auto; border: 1px solid #999; }
+    #scroller .pad { height: 300px; }
+    #zero { position: absolute; top: 0; left: 0; width: 0; height: 0; padding: 0; border: 0; overflow: hidden; }
+    #file { position: absolute; width: 0; height: 0; opacity: 0; }
+  </style>
+</head>
+<body>
+  <div id="overlay"></div>
+  <button id="covered">Covered</button>
+
+  <p><button id="plain">Plain</button></p>
+  <p><button id="hidden-display">Gone</button> <button id="hidden-visibility">Invisible</button></p>
+  <p><button id="disabled" disabled>Disabled</button></p>
+  <fieldset id="locked" disabled>
+    <legend><button id="legend-button">Legend</button></legend>
+    <button id="in-fieldset">In fieldset</button>
+  </fieldset>
+  <p>
+    <input id="readonly" type="text" readonly value="read only">
+    <input id="writable" type="text" value="writable">
+    <textarea id="area"></textarea>
+    <div id="editable" contenteditable="true">Edit me</div>
+  </p>
+  <div id="inert-region" inert><button id="in-inert">Inert</button></div>
+  <dialog id="dlg"><button id="in-dialog">Inside</button><div id="shadow-host"></div></dialog>
+  <div id="scroller"><div class="pad"></div><button id="deep" onclick="this.setAttribute('data-clicked', '1')">Deep</button></div>
+  <button id="zero">Zero</button>
+  <p id="many"><button id="m0">0</button><button id="m1">1</button><button id="m2">2</button><button id="m3">3</button><button id="m4">4</button><button id="m5">5</button><button id="m6">6</button><button id="m7">7</button><button id="m8">8</button><button id="m9">9</button></p>
+  <p><button id="outside-dialog">Outside</button></p>
+  <p><button id="moving">Moving</button></p>
+  <p>
+    <select id="choices"><option id="opt-a" value="a">A</option><option id="opt-b" value="b">B</option><option id="opt-blue" value="blue">Blue</option></select>
+    <label>File <input id="file" type="file"></label>
+  </p>
+
+  <button id="bouncer">Bouncing</button>
+  <div id="hidden-box"><input id="file-hidden" type="file"></div>
+  <button id="far" onclick="this.setAttribute('data-clicked', '1')">Far away</button>
+  <div id="sticky-zone">
+    <header id="top">Sticky header</header>
+    <button id="under-header">Under the header</button>
+  </div>
+  <details id="collapsed"><summary>More</summary><button id="in-details">Hidden in details</button></details>
+  <div style="height: 7000px"></div>
+  <script>
+    document.getElementById('shadow-host').attachShadow({ mode: 'open' }).innerHTML = '<button id="shadow-button">Shadow</button>';
+  </script>
+</body>
+</html>

data/spec/runtime/fixtures/locators.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>Sign in</title></head>
+<body>
+  <script type="application/json">{"action": "Sign in"}</script>
+  <form>
+    <label for="email">Email</label>
+    <input id="email" type="text">
+
+    <label for="email-address">Email address</label>
+    <input id="email-address" type="text">
+
+    <label for="password">Password</label>
+    <input id="password" type="password">
+
+    <label>Username <input type="hidden" name="remember" value="0"><input id="username" type="text"></label>
+
+    <input id="search" type="text" aria-label="Search site">
+
+    <span id="phone-label">Phone number</span>
+    <input id="phone" type="text" aria-labelledby="phone-label">
+
+    <input id="code" type="text" placeholder="Enter code">
+    <input id="name-field" type="text" placeholder="Enter your full name">
+  </form>
+
+  <section id="scope">
+    <label for="scoped-email">Email</label>
+    <input id="scoped-email" type="text">
+  </section>
+
+  <img id="logo" src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" alt="Company logo">
+  <a id="docs-link" href="#docs" title="Read the docs">Docs</a>
+
+  <div id="nested"><p id="sign-in">Sign in</p></div>
+
+  <ul>
+    <li id="item-one" data-testid="item-1">One</li>
+    <li id="item-two" data-testid="item-2">Two</li>
+  </ul>
+
+  <button id="save-a" class="primary">Save</button>
+  <button id="save-b" class="secondary">Save</button>
+  <button id="save-c" class="tertiary">Save</button>
+</body>
+</html>

data/spec/runtime/fixtures/matchers.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Matchers</title>
+</head>
+<body>
+  <h1 id="heading">Loading</h1>
+  <input id="name" type="text" value="Ann">
+  <button id="hide-me" type="button">Hide me</button>
+  <ul id="items"><li>One</li></ul>
+  <a id="finish" href="#">Finish</a>
+  <script>
+    setTimeout(function () { document.getElementById('heading').textContent = 'Ready'; }, 500);
+    document.getElementById('hide-me').addEventListener('click', function (event) {
+      setTimeout(function () { event.target.style.display = 'none'; }, 300);
+    });
+    setTimeout(function () {
+      var list = document.getElementById('items');
+      ['Two', 'Three'].forEach(function (text) {
+        var item = document.createElement('li');
+        item.textContent = text;
+        list.appendChild(item);
+      });
+    }, 400);
+    document.getElementById('finish').addEventListener('click', function (event) {
+      event.preventDefault();
+      document.title = 'Done';
+      location.hash = '#done';
+    });
+  </script>
+</body>
+</html>

data/spec/runtime/fixtures/roles.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en" id="r-html">
+<head><meta charset="utf-8"><title>Roles fixture</title></head>
+<body>
+<h1 id="r-h1">Roles</h1><h2 id="r-h2">Two</h2><h3 id="r-h3">Three</h3><h4 id="r-h4">Four</h4><h5 id="r-h5">Five</h5><h6 id="r-h6">Six</h6>
+
+<!-- implicit roles -->
+<a id="r-link" href="#x">Link</a>
+<a id="r-anchor" name="x">Anchor</a>
+<map name="m"><area id="r-area" href="#x" alt="Area alt" shape="rect" coords="0,0,1,1"></map>
+<article id="r-article">Article <header id="r-header-in-article">Inner header</header><footer id="r-footer-in-article">Inner footer</footer></article>
+<aside id="r-aside">Aside</aside>
+<button id="r-button">Plain button</button>
+<datalist id="r-datalist"><option value="a"></option></datalist>
+<details id="r-details"><summary id="r-summary">Summary</summary>Body</details>
+<dialog id="r-dialog">Dialog</dialog>
+<fieldset id="r-fieldset"><legend>Group</legend></fieldset>
+<figure id="r-figure">Figure</figure>
+<header id="r-header">Top header</header>
+<footer id="r-footer">Bottom footer</footer>
+<form id="r-form"></form>
+<hr id="r-hr">
+<img id="r-img" src="data:," alt="Photo">
+<img id="r-img-empty-alt" src="data:," alt="">
+<img id="r-img-presentation" src="data:," alt="Decor" role="presentation">
+<input id="r-in-button" type="button" value="B">
+<input id="r-in-image" type="image" alt="I" src="data:,">
+<input id="r-in-reset" type="reset">
+<input id="r-in-submit" type="submit" value="S">
+<input id="r-in-checkbox" type="checkbox">
+<input id="r-in-radio" type="radio">
+<input id="r-in-range" type="range">
+<input id="r-in-number" type="number">
+<input id="r-in-search" type="search">
+<input id="r-in-search-list" type="search" list="r-datalist">
+<input id="r-in-email" type="email">
+<input id="r-in-tel" type="tel">
+<input id="r-in-text" type="text">
+<input id="r-in-url" type="url">
+<input id="r-in-password" type="password">
+<input id="r-in-default">
+<input id="r-in-text-list" type="text" list="r-datalist">
+<input id="r-in-hidden" type="hidden">
+<ul id="r-ul"><li id="r-li">Item</li></ul>
+<ol id="r-ol"><li>One</li></ol>
+<menu id="r-menu"><li>M</li></menu>
+<li id="r-li-orphan">Orphan</li>
+<main id="r-main">Main</main>
+<math id="r-math"><mi>x</mi></math>
+<meter id="r-meter" value="0.5"></meter>
+<nav id="r-nav">Nav</nav>
+<select id="r-select"><option id="r-option" value="1">One</option></select>
+<select id="r-select-multiple" multiple><option>One</option></select>
+<select id="r-select-size" size="3"><option>One</option></select>
+<output id="r-output">0</output>
+<progress id="r-progress" value="1" max="2"></progress>
+<section id="r-section">Unnamed section</section>
+<section id="r-section-label" aria-label="Named section">Named</section>
+<span id="r-lb-target">Heading words</span>
+<section id="r-section-labelledby" aria-labelledby="r-lb-target">Named by id</section>
+<table id="r-table">
+  <caption id="r-caption">Cap</caption>
+  <thead id="r-thead"><tr id="r-tr"><th id="r-th-col">Name</th><th id="r-th-colscope" scope="col">Age</th></tr></thead>
+  <tbody id="r-tbody">
+    <tr><th id="r-th-first">Row one</th><td id="r-td">Cell</td></tr>
+    <tr><td>x</td><th id="r-th-second">Late th</th><th id="r-th-scoperow" scope="row">Scoped row</th></tr>
+  </tbody>
+  <tfoot id="r-tfoot"><tr><td>f</td></tr></tfoot>
+</table>
+<table><tbody><tr><th id="r-th-only-1">Name</th><th id="r-th-only-2">Age</th></tr></tbody></table>
+<table role="grid"><tbody><tr><td id="r-td-grid">Grid cell</td></tr></tbody></table>
+<div role="grid"><div role="row"><table><tbody><tr><td id="r-td-grid-ancestor">Deep</td></tr></tbody></table></div></div>
+<textarea id="r-textarea"></textarea>
+<div id="r-div">Div</div>
+<span id="r-span">Span</span>
+<div id="r-div-button" role="button">Div button</div>
+<div id="r-role-tokens" role="bogus button">Tokens</div>
+<button id="r-bad-role" role="bogus">Bad role</button>
+<a id="r-explicit-over-implicit" href="#x" role="button">Link as button</a>
+
+<p id="r-p">Para</p><blockquote id="r-blockquote">Quote</blockquote><code id="r-code">c</code><em id="r-em">e</em>
+<strong id="r-strong">s</strong><del id="r-del">d</del><ins id="r-ins">i</ins><sub id="r-sub">b</sub><sup id="r-sup">p</sup>
+<time id="r-time">now</time><dfn id="r-dfn">term</dfn><dl><dt id="r-dt">T</dt><dd id="r-dd">D</dd></dl>
+<search id="r-search">Search</search><address id="r-address">Addr</address>
+<select id="o-select"><optgroup id="r-optgroup" label="G"><option id="o-option">Pick me</option></optgroup><option id="o-other">Other</option></select>
+<div style="display:contents"><button id="dc-button" style="display:contents">Contents button</button></div>
+<div id="lv-aria" role="heading" aria-level="2">Aria two</div>
+<div id="shadow-host"></div>
+<script>
+  document.getElementById('shadow-host').attachShadow({ mode: 'open' }).innerHTML =
+    '<span id="sl">Labelled inner</span><button>Shadow inner</button><button aria-labelledby="sl">x</button>';
+</script>
+
+<!-- accessible names -->
+<input id="n-placeholder" placeholder="Email address">
+<input id="n-placeholder-title" title="Title wins" placeholder="Ignored">
+<textarea id="n-placeholder-area" placeholder="Say more"></textarea>
+<span id="n-ll1">First</span>
+<span id="n-ll2" aria-label="Second label">ignored text</span>
+<button id="n-labelledby" aria-labelledby="n-ll1 n-ll2">own text</button>
+<span id="n-hid" style="display:none">Hidden <b>label</b></span>
+<button id="n-lb-hidden" aria-labelledby="n-hid">own</button>
+<span id="n-nest" aria-labelledby="n-ll1">Nest text</span>
+<button id="n-lb-nested" aria-labelledby="n-nest">own</button>
+<button id="n-lb-missing" aria-labelledby="nope-nothing">Falls back</button>
+<button id="n-arialabel" aria-label="Close dialog">X</button>
+<label for="n-labelfor">Email
+   address</label><input id="n-labelfor" type="text">
+<label>Wrapped label <input id="n-wrapped" type="text"></label>
+<img id="n-img" src="data:," alt="Company logo">
+<input id="n-input-image" type="image" src="data:," alt="Go">
+<map name="m2"><area id="n-area" href="#x" alt="Area name" shape="rect" coords="0,0,1,1"></map>
+<input id="n-submit" type="submit" value="Send">
+<input id="n-input-button" type="button" value="Plain value">
+<input id="n-reset" type="reset" value="Clear">
+<input id="n-submit-empty" type="submit">
+<table id="n-table"><caption>Sales</caption><tbody><tr><td>1</td></tr></tbody></table>
+<fieldset id="n-fieldset"><legend>Contact</legend><input type="text"></fieldset>
+<figure id="n-figure"><img src="data:," alt=""><figcaption>Chart caption</figcaption></figure>
+<button id="n-title" title="Tooltip only"></button>
+<a id="n-title-fallback" href="#x" title="ignored title">Text wins</a>
+<a id="n-embedded" href="#x">Search for <input type="text" value="cats"></a>
+<a id="n-slider" href="#x">Rate <input type="range" min="0" max="10" value="7"> stars</a>
+<a id="n-select" href="#x">Pick <select><option>One</option><option selected>Two</option></select></a>
+<button id="n-content">Go <img src="data:," alt="icon"> now</button>
+<a id="n-blocks" href="#x"><div>One</div><div>Two</div></a>
+<a id="n-inline" href="#x"><span>Ab</span><span>cd</span></a>
+<h2 id="n-heading">  Spaced
+   title </h2>
+<button id="n-hidden-child">Visible<span style="display:none"> secret</span><span aria-hidden="true"> aria</span></button>
+<div id="n-div-button" role="button">Div button</div>
+<div id="n-generic">Generic text</div>
+<ul><li id="n-li">Item text</li></ul>
+<button id="n-unreferenced-hidden" style="display:none">Nope</button>
+<input id="n-unlabelled" type="text">
+
+<section id="cy-self" aria-labelledby="cy-self">Self</section>
+<section id="cy-a" aria-labelledby="cy-b">A</section>
+<section id="cy-b" aria-labelledby="cy-a">B</section>
+<button id="cy-button" aria-labelledby="cy-button">Self button</button>
+
+<!-- hidden cases -->
+<button id="h-visible">Shown</button>
+<button id="h-aria-hidden" aria-hidden="true">Aria hidden</button>
+<div aria-hidden="true"><button id="h-anc-aria">Under aria-hidden</button></div>
+<div style="display:none"><button id="h-anc-none">Under display none</button></div>
+<button id="h-display-none" style="display:none">Display none</button>
+<button id="h-attr" hidden>Hidden attribute</button>
+<button id="h-visibility" style="visibility:hidden">Visibility hidden</button>
+<div style="visibility:hidden"><button id="h-vis-parent-child" style="visibility:visible">Visible child</button><button id="h-vis-inherit">Inherits hidden</button></div>
+
+<!-- queries -->
+<div id="saves">
+  <button id="save-1">Save</button>
+  <button id="save-2">Save as</button>
+  <button id="save-3">save</button>
+  <button id="save-hidden" style="display:none">Save later</button>
+</div>
+<div id="scope"><button id="scope-save">Save</button></div>
+<div id="scope-button" role="button"><button id="scope-inner">Inner</button></div>
+</body>
+</html>