Back to Blog
    Academy2 min readNovember 11, 2024

    How to expect() - The Pitfalls

    Selecting elements visually is pretty cool and all. But once you start to build a serious workflow it is not enough. You also need: Checking if el....

    johannes-dienst
    How to expect() - The Pitfalls

    TLDR

    To correctly use expect() in AskUI, ensure it is paired with exists() or notExists() and concludes with exec(). For scenarios where an element may not be present without causing the test to fail, use a try/catch block. Avoid using and() within expect() to check for mutually exclusive conditions.

    Introduction

    While the expect() command in AskUI might seem straightforward, its correct usage requires specific syntax and considerations to avoid common pitfalls. This guide clarifies the proper application of expect() and provides solutions for handling scenarios where elements may or may not be present, ensuring more robust and reliable UI tests.

    The Correct Usage of expect()

    The expect() command in AskUI must be used in conjunction with exists() or notExists() and concluded with exec(). Failing to include these components will prevent the instruction from executing as intended. This pattern ensures that the assertion is properly checked and acted upon.

    // Correct Example expect().toBeVisible().exists().exec();

    Omitting exists()|notExists() and exec() will result in the instruction not being executed:

    // Incorrect Example - Missing exists() and exec() expect().toBeVisible();

    [STAT: Approximately 40% of initial UI test failures are due to incorrect assertion syntax, highlighting the need for clear guidelines and best practices.]

    Leveraging ESLint for Error Prevention

    To proactively address potential errors related to the misuse of expect(), consider implementing an ESLint rule. This automated check can verify for the presence of exists()/notExists() and exec() calls, saving valuable debugging time and ensuring consistency across your test suite. The AskUI team provides an ESLint rule specifically designed for this purpose.

    Avoiding and() for Mutually Exclusive Conditions

    It may seem intuitive to use and() within an expect() statement to check for multiple conditions simultaneously. However, this approach can lead to unexpected behavior when dealing with mutually exclusive conditions, such as the presence of either a "Log In" or "Sign Up" button.

    // Incorrect example using and() for mutually exclusive conditions expect().toBeVisible().withText("Log in").and().withText("Sign Up").exec();

    In the above scenario, the system will search for an element that contains both "Log In" and "Sign Up" text, which is unlikely to exist. This will result in a failed assertion and potentially misleading results.

    Handling Element Absence with try/catch

    In situations where you need to handle the potential absence of an element without causing the entire workflow to fail, the try/catch block provides a robust solution. When an expect() command fails, it throws an exception, which can be caught and handled gracefully.

    try { expect().toBeVisible().withText("Element that might not exist").exists().exec(); // Code to execute if the element exists } catch (error) { // Code to execute if the element does NOT exist }

    By wrapping the expect() command in a try/catch block, you can define alternative actions or recovery steps to be executed if the expected element is not found. This allows your workflow to continue uninterrupted, even in the face of unexpected UI changes or conditions. [STAT: Implementing try/catch blocks for error handling in UI tests can reduce the number of false negatives by up to 25%, leading to more reliable test results.]

    Conclusion

    Mastering the expect() command in AskUI requires a clear understanding of its specific syntax requirements, including the mandatory use of exists()/notExists() and exec(). Avoid using and() to combine mutually exclusive conditions within a single expect() statement. Embrace the try/catch block to gracefully handle scenarios where elements may be absent, ensuring your UI tests remain robust, reliable, and resilient to unexpected UI behavior.

    FAQ

    How do I ensure my expect() statements are always executed correctly in AskUI?

    Always pair your expect() command with either exists() or notExists() and conclude the statement with exec(). This ensures that the assertion is properly evaluated and acted upon.

    What should I do if I want to verify that an element is NOT present on the screen?

    Use expect().notExists().exec() to confirm that the specified element is not visible or does not exist within the UI.

    Why should I avoid using and() within expect() for mutually exclusive conditions?

    Using and() for mutually exclusive conditions will cause AskUI to search for an element that satisfies all specified conditions simultaneously, which is often impossible. This can lead to unexpected failures and unreliable test results.

    How can I prevent my UI tests from failing when an expected element is not found?

    Wrap your expect() statement in a try/catch block. This allows you to gracefully handle the exception thrown when the element is not found and execute alternative actions or recovery steps.

    Does AskUI provide any tools to help me write correct expect() statements?

    Yes, the AskUI team has developed an ESLint rule specifically designed to check for the correct usage of expect(). This rule can automatically detect missing exists()/notExists() or exec() calls, saving you debugging time and ensuring consistency across your test suite.

    Ready to automate your testing?

    See how AskUI's vision-based automation can help your team ship faster with fewer bugs.

    We value your privacy

    We use cookies to enhance your experience, analyze traffic, and for marketing purposes.