Giter Site home page Giter Site logo

semantic-locators's Introduction

Semantic Locators

Semantic locators are a human readable, resilient and a11y-enforcing way to find web elements.

They're available in JavaScript and TypeScript and Java WebDriver. More bindings are coming soon.

Just want to get started writing semantic locators? See the tutorial.

TL;DR: Use semantic locators like this:

HTML Semantic Locator
<button>OK</button> {button 'OK'}
<div role="tab" aria-label="Meeting"> {tab 'Meeting'}
<ul><li> {list} {listitem}
<button>User id: 32659768187</button> {button 'User id: *'}
<div role="checkbox" aria-checked="false"></div> {checkbox checked:false}

Introduction

There are various ways to define HTML elements which are semantically identical, i.e. they permit the same user interactions. The following all express the same semantics:

<button>OK</button>
<button aria-label="OK">...</button>
<div role="button">OK</div>
<input type="button" aria-label="OK">
<button aria-labelledby="other_element">...</button><div id="other_element">OK</div>
<button id="element_id">...</button><label for="element_id">OK</label>
<div role="button" title="OK">...</div>

They are all matched by the semantic locator {button 'OK'}.

button refers to the ARIA role expressed by the element (explicitly with role="button" or implicitly). Implicit ARIA semantics are defined in W3 ARIA in HTML document conformance.

'OK' refers to the accessible name of the element.

<button aria-labelledby="other_element">...</button>
<div id="other_element">OK</div>

Benefits

Resilient

Semantic locators are less brittle to user-invisible changes. Referencing only semantics abstracts away implementation details. For example if

<div><span><div><div><div role="button">Send

changes to

<div><button>Send

then {button 'Send'} will still work as a locator.

Accessible

Semantic locators can help discovering a11y bugs, since they will not work well on pages with poor a11y.

Human readable

XPath: //*//input[@type='submit' and @aria-label='Send'].

Semantic locator for the same button: {button 'Send'}.

Easy to write

Semantic Locators can be automatically generated using a Chrome Extension, or easily written with the help of browser dev tools. See the tutorial for a guide.

Getting started

See the getting started instructions for your environment:

Limitations

Inaccessible elements

If an element is inaccessible (it doesn't appear in the accessibility tree) then no semantic locator will exist for it. This limitation should not come into play for elements which a human would interact with, as these should be accessible.

However if you want to interact with an element that you don't expect humans to interact with, you will have to fall back to a different type of locator for that element.

Disclaimer

This is not an officially supported Google product.

semantic-locators's People

Contributors

alexlloyd0 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.