0.6.0 • Published 6 years ago
fuzzy-query v0.6.0
fuzzy-query
What is fuzzy-query ?
- It is a library to select HTML element and operate input action for form.
- It has original selecting query which puts more emphasis on visibility than performance.
- It makes End-To-End test more intuitive and stronger than css selector.
Usage
Selectors
RegExp Selector
<!-- click me ! -->
<button>foo</button>
<script>
FQ(/foo/).click();
</script>
CSS selector
<!-- click me ! -->
<button class='foo-btn'>foo</button>
<script>
FQ('.foo-btn').click();
</script>
Ordered Selector (combination of selectors)
<h3>foo</h3>
<!-- not click me ! -->
<button>bar</button>
<h3>baz</h3>
<!-- click me ! -->
<button>bar</button>
<script>
FQ(/baz/, /bar/).click();
</script>
Orderd Selector with index (last argument)
<h3>foo</h3>
<!-- click me ! -->
<a href="/bar">bar</a>
<h3>baz</h3>
<script>
FQ(/foo/, 'a', /baz/, 1).click();
</script>
table selector
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value1</td>
<!-- click me! -->
<td>value2: <input id="ex-table-selector" /></td>
<td><div>value3</div></td>
</tr>
<tr>
<td>value4</td>
<td>value2: <input /></td>
<td><div>value3</div></td>
</tr>
</tbody>
</table>
<script>
FQ({col: /head2/, row: /value1/}, 'input').click();
// row can also be index number
FQ({col: /head2/, row: 1}, 'input').click();
</script>
group member selector
grouping elements by group value (need to be css selector), member and post selectors will search nodes between grouping elements.
<h3 style="color: blue;" class="colors natural">sea</h3>
<div>foo</div>
<h3 style="color: red;" class="colors natural">sun</h3>
<div>foo</div>
<script>
FQ({group: '.colors', member: /sea/}, /foo/); // find element <div>foo</div>
FQ({group: '.colors', member: /sea/}, /foo/, /foo/); // not find element
</script>
heading selector
find "heading element" by heading key, and find next element until "next heading element".
if RegExp selector is specified to find heading element, element having same style (*) of heading element will be next heading element. (if css selector is specified, element matching css selector will be next.)
*same style means two elements having same class, style attributes and same style ancestors.
<h3 style="color: blue;" class="colors natural">sky</h3>
<div>foo</div>
<h3 style="color: blue;" class="colors natural">sea</h3>
<div>foo</div>
<script>
FQ({heading: /sky/}, /foo/); // find element <div>foo</div>
FQ({heading: /sky/}, /foo/, /foo/); // not find element
</script>
Selecting Priority
In first selector, last element takes a priority.
<table> <tr> <!-- not click me ! --> <td><a href="/foo">foo</a></td> <td>bar</td> </tr> <tr> <!-- click me ! --> <td><a href="/baz">baz</a></td> <td>foobar</td> </tr> </table> <script> FQ('a', /foobar/, 0).click(); </script>
In other selector, first element takes a priority.
<h3>foo</h3> <!-- click me ! --> <button>bar</button> <!-- not click me ! --> <button>baz</button> <script> FQ(/foo/, 'button').click(); </script>
Operations
click
<button>foo</button>
<script>
FQ(/foo/).click();
</script>
select (list)
this method has a string argument (it is interpreted by RegExp)
<div>
Value:
<select>
<option value="foo">foo</option>
<!-- select me ! -->
<option value="bar">bar</option>
<option value="baz">baz</option>
</select>
</div>
<script>
FQ(/Value:/, 'select').select('bar');
</script>
select (checkbox)
<input type="radio" value="foo" /> foo
<!-- select me ! -->
<input type="radio" value="bar" /> bar
<script>
FQ('input', /bar/, 0).select();
</script>
type
<div>
Value: <input type="text" />
</div>
<script>
FQ(/Value:/, 'input').type('foo');
</script>
text
<h3>foo</h3>
<div>get this text !</div>
<script>
FQ(/foo/, 'div').text();
// => 'get this text !'
</script>
License
MIT