This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Understanding Text Filters in askui


This tutorial demonstrates totally different strategies to deal with textual content parts with askui. askui gives 4 totally different strategies:

  • containsText()
  • withExactText()
  • withText()
  • withTextRegex()



Necessities

  • askui put in and arrange.

For a handy demonstration, we’ll use a Flutter web demo supplied by Flutter.




Fundamental Textual content Matching

The only strategy to work together with a textual content ingredient is to make use of withText(). Go to the demo app web page and run the code under:

await aui.moveMouseTo().textual content().withText('matrial').exec();
await aui.mouseLeftClick().exec();
Enter fullscreen mode

Exit fullscreen mode

Image description

withText() tries to discover a textual content that matches the entire sequence. In most take a look at instances, it would be best to follow this technique, because it helps Fuzzy Matching and tolerates misspelled textual content. Be aware that the above instance code has two typos. matrial does not match the textual content within the demo app, which is Materials, though askui will discover the textual content ingredient that roughly matches the textual content on the display screen.




Match a Substring inside a Textual content

Regardless that the the strategy withText() is helpful and fairly dependable, you may face a take a look at case the place you understand solely a fraction of the textual content ingredient that you simply wish to work together with. In such a case, containsText() is the strategy you may wish to use:

await aui.moveMouseTo().textual content().containsText('Backside').exec();
await aui.mouseLeftClick().exec();
Enter fullscreen mode

Exit fullscreen mode

Image description

Remember that even when the strategy containsText() additionally helps Fuzzy Matching, it will not match the entire sequence by only a few characters. Attempt to use this code with the given demo app:

// this may fail
await aui.moveMouseTo().textual content().containsText('Bottm').exec(); 
Enter fullscreen mode

Exit fullscreen mode

You’ll discover that askui fails to match the given textual content Bottm, whereas this code will work:

// this may success
await aui.moveMouseTo().textual content().containsText('Bottm appbar').exec(); 
// this can even success
await aui.moveMouseTo().textual content().containsText('Backside').exec(); 
Enter fullscreen mode

Exit fullscreen mode

The most important distinction between withText() and containsText() is whether or not it matches the textual content as a complete sequence or not. Matching many texts with a repeating affix might be a sensible use case for the containsText().

It is suggested to experiment sufficient with these methonds to discover a higher choice that fits your particular case, since it is not straightforward to foretell if the given textual content will be fuzzy-matched with goal texts.




Match the Actual Textual content

When you already know what textual content you’re on the lookout for, or if there are too many comparable textual content parts, we might use the strategy withExactText().

From the principle web page of the demo app, go to Materials->Knowledge tables. You will notice a desk with totally different meals given with vitamin components for every of them.

For instance that we wish to click on on the gadgets that has precisely 25.0 gm of Fats. In our demo app, solely the Doughnut is the matching merchandise. Run this code and see how withText() matches the textual content:


// Use this helper perform to calculate the centroid of the detected parts.
perform getCentroid(ingredient: any): any {
    let x = (ingredient.bndbox.xmax - ingredient.bndbox.xmin) / 2.0 + ingredient.bndbox.xmin;
    let y = (ingredient.bndbox.ymax - ingredient.bndbox.ymin) / 2.0 + ingredient.bndbox.ymin;
    return { x: x, y: y };
}

// Discover all of the textual content parts that matches '25.0'
const elts = await aui.get().textual content().withText('25.0').exec();

// Then, iterate by way of the discovered parts and click on on them
for(let i=0; i<elts.size; ++i){
    const centroid = getCentroid(elts[i]);
    await aui.moveMouse(Math.spherical(centroid.x), Math.spherical(centroid.y)).exec();
    await aui.mouseLeftClick().exec();
}

Enter fullscreen mode

Exit fullscreen mode

Image description

You will notice that askui clicks not solely the 25.0 but in addition the 26.0, which is the fats of the Apple pie. The results of this take a look at code could differ in your case, due to the totally different display screen decision and the rendered-size of the demo app.

It offers you a transparent concept the place you have to to make use of the strategy withExactText() as an alternative of withText(). Attempt to run the identical code after changing the withText() to withExactText():

// Discover all of the textual content parts that matches '25.0' precisely
const elts = await aui.get().textual content().withExactText('25.0').exec();

// Then, iterate by way of the discovered parts and click on on them
for(let i=0; i<elts.size; ++i){
    const centroid = getCentroid(elts[i]);
    await aui.moveMouse(Math.spherical(centroid.x), Math.spherical(centroid.y)).exec();
    await aui.mouseLeftClick().exec();
}
Enter fullscreen mode

Exit fullscreen mode

Image description



Match Textual content with Common Expression

The tactic withTextRegex() helps Common Expression to match any textual content in probably the most versatile means. Though it may be difficult to make use of regex attributable to its esoteric look, it’s possibly among the best resolution relating to character matching.

On the identical web page of the demo app, for example that we wish to click on on the gadgets whoes Calorie is between 300 and 500 (cal>=300 && cal<500). Since regex does not assist numeric comparability, we’ll attempt to match the digits in a sequence:

// Discover all of the textual content that matches the expression
const cals = await aui.get().textual content().withTextRegex('[3-4][0-9]{2}').exec();

// Then, iterate by way of the discovered parts and click on on them
for(let i=0; i<cals.size; ++i){
    const coord = getCentroid(cals[i]);
    console.log(cals[i].textual content, coord);
    await aui.moveMouse(Math.spherical(coord.x), Math.spherical(coord.y)).exec();
    await aui.mouseLeftClick().exec();
}
Enter fullscreen mode

Exit fullscreen mode

The common expression [3-4][0-9]{2} means,

  • [3-4]: Match one character between 3 and 4.
  • [0-9]: Match one character between 0 and 9.
  • {2}: Repeat the earlier expression ([0-9]) two instances.

Because the end result, it’s going to attempt to match each textual content that has a sequence beginning with the digit 3 or 4, after which has any two digits in a row.



Conclusion

When utilizing askui for automated exams, textual content parts are enjoying an enormous position, since they usually seem extra distinctively than different parts comparable to icons or textfields. Therefore, understanding the advantages of utilizing totally different textual content filters can develop into important in scaffolding a strong take a look at suite.

When you obtained any subject by following this tutorial, or if you wish to share your askui use case, you’ll be able to be a part of our neighborhood on !

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?