Tips for identifying and handling errors in Playwright

I'm going crazy trying to handle a TimeoutError that I know is coming. Currently, I'm testing the Hidden Layers scenario from UI Testing Playground in Playwright Node.js and I want to see if there's a way to prevent the TimeoutError from causing the test to fail, since that's the expected behavior. I'm still pretty new to automating tests with both Playwright and Typescript.

I've attempted various methods, including having the clickGreenButton() method intentionally throw the error, but it seems like the expect() function isn't able to catch it at all.

This is the method inside the HiddenLayersPage.ts:

    async clickGreenButton() {
        await this.greenButton.click()
    }

Here's the code in the spec file that is supposed to verify that the second click won't be successful because the element to be clicked becomes hidden:

await hiddenLayersPage.clickGreenButton();
expect(async () => await hiddenLayersPage.clickGreenButton()).toThrow();
typescriptui-automationplaywright

Answer №1

This issue is occurring because expect is executing your function, but as it is marked as `async`, it is returning a promise (even if rejected) instead of an error or exception.

Therefore, the syntax needs to be adjusted slightly. You simply have to provide expect with the resulting promise, specify to unwrap the promise using .rejects, and then invoke toThrow, in this manner:

await expect(hiddenLayersPage.clickGreenButton()).rejects.toThrow();

Take note of how await is used/placed, as you must await the async matcher, but not await the function itself since you require the promise.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating to specific rows in a primeng virtualscroll table using the scrollToIndex

Utilizing Primeng virtual scroll table in Angular to manage large datasets in an array. I am interested in using the scrollToIndex. Is there an equivalent of cdk-virtual-scroll-viewport in Primeng table? I need the functionality where, upon a user clicking ...

angulartypescriptprimengprimeng-tablescrolltoindex

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

Tips for adding a time increment of 24 hours to a date variable in Angular 6

My goal is to update a date variable called EndDate stored in localStorage by adding exactly 24 hours to it. The current value in the localStorage is Sun Jun 09 2019 20:39:44 GMT+0530 (India Standard Time). var endDate = new Date(); endDate.setDat ...

angulartypescriptangular6

Issue encountered while attempting to upload a document in Angular due to Content-Disposition

I am having trouble uploading a file using Angular. Every time I make the request, an error occurs stating: "Request has been blocked by CORS policy: Request header field content-disposition is not allowed by Access-Control-Allow-Headers in preflight respo ...

angulartypescript

Guide on dividing a URL string in Angular framework

Is there a way to include a value directly in the URL, like so: http://example.com/component/july2021 I need to extract july2021 from the component and separate it into "july" and "2021". How can I achieve this? ...

angulartypescript

What is the best way to verify the input of a TextField element?

When I visited the Material UI Components documentation for TextField, I was hoping to find an example of validation in action. Unfortunately, all they showed was the appearance of the invalid TextField without any insight into the actual validation code i ...

reactjstypescriptmaterial-ui

Setting up NextJs in Visual Studio Code with Yarn

When I used yarn create next-app --typescript to set up a TypeScript Next.js application with Yarn, everything seemed to be working fine with the command yarn run dev. However, Visual Studio Code was not recognizing any of the yarn packages that were added ...

typescriptvisual-studio-codenext.jsyarnpkg

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'

Receiving TS error that says "Object is undefined" I am attempting to retrieve the "userid" from my headers. However, I keep encountering the error message "Argument of type 'string | undefined' is not assignable to parameter of type 'str ...

javascripttypescriptapitypes

Encountering a Static Injector error in Angular 5 while trying to inject a component from a shared module

Here lies the code for my component file. My goal is to develop a reusable modal component using ng-bootstrap's modal feature. However, upon trying to import the following component from the shared module, I encounter a static injector error. Despite ...

typescriptangular5angular-componentsng-modules

Encountering a ReactJS and TypeScript issue with error code TS2322: Unable to assign type to 'IntrinsicAttributes & IntrinsicClassAttributes'

I encountered a TS2322 error when trying to pass the searchForBooks method as props from the JumboBooks component to the SearchBooks component: JumboBooks.tsx (Parent) import { RouteComponentProps } from 'react-router'; ... export class JumboBo ...

reactjstypescript

Implementing a dynamic star rating system in Angular

I am working with an array of ratings that looks like this: "rating": [ { "sno": 1, "question": 13, }, { "sno": 2, ...

angulartypescript

What is the process for assigning a predefined type that has already been declared in the @types/node package?

Is there a way to replace the any type with NetworkInterfaceInfo[] type in this code snippet? Unfortunately, I am unable to import @types/node because of an issue mentioned here: How to fix "@types/node/index.d.ts is not a module"? Here is the o ...

typescript

Implement a concealed identification field with React-Admin within a React Native application

I'm currently working on incorporating the SimpleFormIterator from the React-Admin module in order to generate a list of child records within a parent record edit form. After setting up the SimpleFormIterator component with all the necessary details ...

reactjstypescriptreact-nativereact-admin

Possibility for Automatic Type Inference in Generics

Is there a way to have a method infer the type of function parameter without specifying its generic? Currently it is 'GET' | 'POST', but I only need the literal 'GET' const func = <Params, Method extends "GET" | & ...

typescript

Assigning a specific data type to an object in TypeScript using a switch case statement

I am currently developing a React Native app using TypeScript. As part of my development, I am creating a handler with a switch case structure like the one below: export const handleMessageData = (dispatch: Dispatch, messageData: FCMMessage): void => ...

typescriptswitch-statementtypescript-typingstypescript-types

Simple guide on implementing React with Typescript to support both a basic set of properties and an expanded one

I'm grappling with a React wrapper component that dynamically renders specific components based on the "variant" prop. Despite my efforts, I cannot seem to get the union type working properly. Here's a snippet of the code for the wrapper componen ...

javascriptreactjstypescript

"Troubleshooting Console Errors in NextJS with TypeScript Integration and Fluent UI Components

I am currently working with NextJS, TypeScript, and Fluent UI. To set up the app, I used the command yarn create next-app --typescript. Afterwards, I incorporated Fluent UI into my project by running $ yarn add @fluentui/react. So far, I have not made an ...

typescriptnext.jsfluent-uifluentui-react

What is the method for defining a monkey patched class in a TypeScript declarations file?

Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...

javascripttypescripttypescript-definitions

What is the process for locating the css style attribute of a specific html element with Robot Framework?

In my current project, I am developing an automation test script using Robot Framework and Selenium2Library to test the web application's functionality in a text file format. One of the test cases I am working on requires checking the CSS style attrib ...

selenium-webdriverautomated-testsui-automationrobotframework

When I attempt to return an object from a function and pass the reference to a prop, TypeScript throws an error. However, the error does not occur if the object is directly placed in

Currently, I have the following code block: const getDataForChart = () => { const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; const test = { ...

javascriptreactjstypescriptreact-chartjs