QWords™ by example

Intro

The best way to learn how to use QWords is by using them in a real use case. Below we will automate two use cases to get familiar how QWords work and how they should be used. Let’s try them out together. Follow the steps below in QEditor.

Use case 1

  • Open our example page: https://qentinelqi.github.io/shop

  • Assert that text "The animal friendly clothing company" is visible on the front page

  • Navigate to product page of "Scar the Lion" by clicking the textual link

  • Assert that [Add to cart] button is visible and click it

  • Assert that we are redirected to "Cart summary" page

  • Change t-shirt size to Large

  • Change "Quantity" to 2 by clicking + icon

  • Click "Remove item" icon to remove item from cart

  • Assert that cart is empty (tip: text "Your cart is empty" should be visible)

  • Click link "Continue shopping"

Opening Browser

The first QWord when testing Web applications should be OpenBrowser. OpenBrowser takes two arguments:

  • url which to open

  • browser that should be used (chrome/firefox etc.)

To implement this step we would simply use:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
Other web related QWords will not work until a browser session is opened with OpenBrowser QWord. You cannot manually open a browser and connect to it (and that wouldn’t even be reliable).

Basic assertions

Asserting in Copado Robotic Testing can be done with "verification" QWords. These start with a word Verify. Most common examples are VerifyText, VerifyElement and VerifyItem.

This text could be asserted with any of the above, but since this is textual, the simplest one to use is VerifyText. VerifyText has only one mandatory argument, the text we expect to find on the screen. Let’s add this step to our script:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company

Navigate to product page

To interact with elements on a web page you would use "interaction" QWords. Most common interactions are clicking the element, typing to a field, checking a checkbox or selecting a value from a dropdown. In this particular step we want to click a textual link. Again, clicking can be done in multiple ways, most common QWords being:

  • ClickText (clicking an element containing text)

  • ClickItem (clicking an element by attribute. Usually used for elements not containing text like icons)

  • ClickElement (clicking an element based on xpath/css selectors)

Since we want to click textual link "Scar the Lion", we will select ClickText QWord:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company
    ClickText           Scar the Lion
We suggest using UI texts for finding elements when ever possible. These are easiest to maintain and understand in the long run.

How to select which type of QWord to use? We would suggest the following:

  • If there’s visible text on UI, use *Text

  • If not, hover on top of the element and see if tooltip/alt text is displayed. If yes, use *Item

  • In other cases, right-click the element and select "Inspect" on your browser. Then select an attribute value to use with *Item or define a xpath/css selector from page source and use Element

If text "Scar the Lion" would be multiple times on a page, we could use either another Click_ QWord or anchors to identify specific element.

Adding to cart

We will combine the next two steps together.

  • Assert that [Add to cart] button is visible and click it

  • Assert that we are redirected to "Cart summary" page

example scarthelion tee
Figure 1. Add to cart button

Clicking textual information was already covered in previous steps and it doesn’t matter if element is button, link or other clickable text; ClickText can be used. ClickText would also fail if this text would not be there, so no additional assertion is needed.

example cart summary page
Figure 2. Cart summary

To assert that we are in "Cart summary" page we can use the familiar VerifyText QWord. So our script would look like this:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company
    ClickText           Scar the Lion
    ClickText           Add to cart
    VerifyText          Cart summary

Change t-shirt size to Large

example scar the lion dropdown
Figure 3. T-shirt size dropdown

T-shirt size selection could be done with ClickElement and ClickText keywords, but there is a better way of handling standard dropdown elements. QWord Dropdown is meant specifically for this.

Dropdown take two mandatory arguments:

  • locator for the dropdown element

  • The value which should be selected from the dropdown

For locator we could use xpaths or text near to the dropdown. So in this case we can use text Size as a locator:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company
    ClickText           Scar the Lion
    ClickText           Add to cart
    VerifyText          Cart summary
    DropDown            Size            Large

Clicking non-textual icons

Since rest of the steps contain only one new concept, clicking non-textual icons, we will cover rest of the steps here:

  • Change "Quantity" to 2 by clicking + icon

  • Click "Remove item" icon to remove item from cart

  • Assert that cart is empty (tip: text "Your cart is empty" should be visible)

  • Click link "Continue shopping"

So first thing we need to do is click these two elements:

example scar the lion
Figure 4. Icons without text

(+ icon to increment quantity and remove item icon to remove item from cart).

But these two icons don’t have any text. We can’t use the simple VerifyText we’ve used before.

In this case you need to right-click the element and select "Inspect" (or similar) on your browser and check element’s attributes and values. For example, the Quantity + icon’s attributes are:

<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Increment quantity" title="Increment quantity" class="snipcart__icon"><path d="M33.23 30.77H48v2.46H33.23V48h-2.46V33.23H16v-2.46h14.77V16h2.46v14.77z" fill="#313749"></path></svg>

If you are familiar with xpaths you can generate an xpath locator from this. But QWord ClickItem makes this even more easy; you can use any attribute value to find your element. We will select the easiest to understand, "Increment quantity", which can be found from alt attribute.

Do the same for remove from cart icon. Use title attributes value "Remove item".

For the rest of the steps we can use already familiar concept:

  • Verifying text

  • Clicking text

With these changes our script for the first test case would look something like this:

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company
    ClickText           Scar the Lion
    ClickText           Add to cart
    VerifyText          Cart summary
    DropDown            Size            Large
    ClickItem           Increment quantity
    ClickItem           Remove item
    VerifyText          Your cart is empty
    ClickText           Continue shopping

Use case 2

The second use case concentrates on another frequently needed functionality, i.e. inputting text to input fields or forms. The whole use case is:

  • Open our example page: https://qentinelqi.github.io/shop

  • Assert that text "The animal friendly clothing company" is visible on the front page

  • Click link "Contact"

  • Fill in Full Name, Email Address and Message fields

  • Click Send Message

  • Validate that your message was sent (tip: text "Your message is sent. We’ll be in touch soon." is displayed")

Navigating to contact form

These steps are already familiar from the previous use case. The only difference is we don’t need to open a new browser window, we can just navigate to the main url using GoTo keyword.

The script would be something like this:

Use case 2
    GoTo                https://qentinelqi.github.io/shop
    VerifyText          The animal friendly clothing company
    ClickText           Contact

Typing text

We need to fill this form:

example contact form
Figure 5. Contact form

Typing text into input fields, forms or text areas can be done with TypeText QWord. TypeText takes two mandatory arguments:

  • Locator for the input element

  • Text that should be written

Locator can be the label / text near the input field, placeholder text (for example "Enter your name…​" in the screenshot) or you can define it using xpaths or css selectors. In this particular case we can just use UI texts.

Use case 2
    GoTo                https://qentinelqi.github.io/shop
    VerifyText          The animal friendly clothing company
    ClickText           Contact
    TypeText            Full Name           Robot Tester
    TypeText            Email Address       test@test.com
    TypeText            Message             Robots type way faster than I do...
By default TypeText presses TAB key after typing text, which usually moves focus to next input element. This behavior can be changed using SetConfig QWord.
If you want to type sensitive data like usernames or passwords, use QWord TypeSecret which does not write typed text into logs.

Rest of use case 2

Rest of use case 2 is using QWords we have already learned earlier. To click button Send Message we would use ClickText and to verify that a message is sent we’ll assert that text "Your message is sent. We’ll be in touch soon." will be displayed. We can use normal VerifyText for this.

Let’s add one more thing: close the browser at the end of test suite. You can do this with CloseBrowser QWord.

Final implementation

Use case 1
    OpenBrowser         https://qentinelqi.github.io/shop      chrome
    VerifyText          The animal friendly clothing company
    ClickText           Scar the Lion
    ClickText           Add to cart
    VerifyText          Cart summary
    DropDown            Size            Large
    ClickItem           Increment quantity
    ClickItem           Remove item
    VerifyText          Your cart is empty
    ClickText           Continue shopping


Use case 2
    GoTo                https://qentinelqi.github.io/shop
    VerifyText          The animal friendly clothing company
    ClickText           Contact
    TypeText            Full Name           Robot Tester
    TypeText            Email Address       test@test.com
    TypeText            Message             Robots type way faster than I do...
    ClickText           Send Message
    VerifyText          Your message is sent. We'll be in touch soon.
    CloseBrowser

What we have learned

  • Browser must be opened with OpenBrowser keyword before other QWords can be used.

  • Interaction keywords are used to simulate user interactions in web pages. Most common interaction keywords are:

    • ClickText, ClickItem, ClickElement

    • DropDown

    • TypeText

    • ClickCheckbox

  • Assertions can be done using verification QWords. These start with Verify. Most common verification QWords are:

    • VerifyText

    • VerifyItem

    • VerifyElement

    • VerifyElementText (verify that specific element contains specific text)

  • Which type of (*Text, *Item, *Element) QWord should be used?

    • If there is a text on UI, use *Text QWords. These are easiest to understand and maintain

    • If there’s no UI text, try to hover on top of element and see if a tooltip/alt text is displayed. If yes, use *Item QWords.

    • If neither of the above apply, right-click and select "Inspect" on your browser. Then either choose an attribute value to use with Item or define a xpath/css locator based on element source.

Most test scenarios can be fulfilled mostly with these PaceWords and occasionally adding others from QWords Reference.