Examples¶

Document Structure¶

<body>
  <header>
    <img src="/logo.png" alt="My Company"/>

    <form>
      <input type="search" aria-label="Query">
      <button>Search</button>
    </form>
  </header>

  <main>
    <h1>Main Theme</h1>

    <p>Main Content.</p>
  </main>

  <footer>
    Copyright
  </footer>
</body>

describe('everything', function() {
    it('works', function() {
        var page = document.getElementsByTagName('body')[0];

        expect(loud.say(page)).toEqual([
            'banner',
            'My Company', 'img',
            'Query', 'textbox',
            'Search', 'button',
            'banner end',

            'main',
            'Main Theme', 'heading', 'level', '1',
            'Main Content.',
            'main end',

            'contentinfo',
            'Copyright',
            'contentinfo end'
        ]);
    });
});

Controls¶

<input type="checkbox" id="c1"/>

describe('checkbox', function() {
    beforeEach(function() {
        this.checkbox = document.createElement('input');
        this.checkbox.type = 'checkbox';
        document.body.appendChild(this.checkbox);
    });

    afterEach(function() {
        document.body.removeChild(this.checkbox);
    });

    it('not checked', function() {
        expect(loud.say(this.checkbox)).toEqual([
            'checkbox', 'not checked'
        ]);
    });

    it('checked', function() {
        this.checkbox.click();

        expect(loud.say(this.checkbox)).toEqual([
            'checkbox', 'checked'
        ]);
    });
});