Verify automatically filled data using Playwright

Currently experimenting with Playwright and encountering an issue.

I have a web form with 4 fields. When 2 of them are filled, a calculated value appears in the third one. I expected .soft to return the newly appeared value as a string: ""

Here is a snippet of the code I am working with:

await page.getByLabel('Buy up price').fill(buyUp); // fill Buy up price
await page.getByLabel('Percent of sale price').fill(percent); // fill Percent of sale price
if (percent != '') {
    let salePrice = ((+buyUp) * (+percent)/100 + (+buyUp)).toFixed(8);
    const predictPrice = page.locator('//*[@id="fvf_salePrice"]');
    await expect.soft(predictPrice).toHaveText(salePrice, {timeout: 5000});
} else {
    await page.getByLabel('Sale price', { exact: true }).fill(salePrice); // fill Sale price
}

While debugging, I can see that the value on selector //*[@id="fvf_salePrice"] exists, but the expect.soft part always fails with the following return values: expected string: salePrice received string: "". It seems like Playwright is capturing the placeholder where the value is displayed, but unable to extract the correct value. I have tried using various selectors (Xpath, CSS, etc.), implemented while loops to wait for data updates, but so far nothing has worked. The testing environment is set up on chromium.

Could this issue be related to dynamically changing data, or is there possibly something wrong in my code?

typescriptplaywrightautofill

Answer №1

Huge shoutout to everyone who helped me out, I finally figured out the solution. Since the element in question is actually an input field, I needed to use toHaveValue() instead of toHaveText(). Therefore, the line await expect.soft(predictPrice).toHaveText(salePrice, {timeout: 5000}); should be replaced with expect.soft(predictPrice).toHaveValue(salePrice, {timeout: 5000});

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

Conditional logic in TypeScript can be applied to a Promise<boolean>, enabling the execution of code synchronously

In my business logic library, there is a method designed to run asynchronously that takes false as an argument in an if statement. When executed asynchronously, everything works fine: const permissions = new PermissionProvider(userId, appId); if(await pe ...

typescriptif-statementasynchronous

Linking a string value to a specific data structure in TypeScript

I'm currently exploring typescript and I have a question about mapping a string value to a custom type when using templates in function calls. For instance: object.method<TypeMapper['CustomType']>([...]) In this scenario, 'Cust ...

typescripttypes

What steps should be taken to trigger an API call once 3 characters have been entered into a field

In my current project, I am dealing with a parent and child component setup. The child component includes an input field that will emit the user-entered value to the parent component using the following syntax: <parent-component (sendInputValue)="g ...

javascriptangulartypescriptrxjs

Transferring HTML attributes from an Immutable object in Typescript

This implementation is effective type Props = DR<IBtnWrapperPropsBasic> & {otherbuttonProps?: ButtonHTMLAttributes<HTMLButtonElement>} class Btn extends Component<Props, {}> { ... public render() { const {handleCl ...

reactjstypescript

How should testable functions be exported in Typescript through an effective class design?

In my software, I have developed a couple of stateless classes that handle business logic and return computed values. These classes naturally depend on other classes in the system. As I consider the best design approach, I have been contemplating two opti ...

node.jstypescript

Strategies for obtaining the return type of a map and only including the type S

How can I retrieve the return type of map and only display S? const initialState = { x: 1, y: 2 } type InitialStateType = typeof initialState type MapGetter<S, R, R1> = { map: (state: S) => R mapB?: (state: S) => R1 // more ... } ...

typescript

Subscribing to an array of lists with RxJS Subjects and Observables

I have a quick and simple question. I am using a service called DataStorageServiceService where I have initialized shopCartProduct = new Subject<ProductModel[]>();. Now, I have a component named SingleProductComponent and I want to send data into t ...

angulartypescript

How is it possible that there is no type error when utilizing copy with spread syntax?

When I use the map function to make a copy of an array of objects, why doesn't it throw an error when adding a new property "xxx"? This new property "xxx" is not declared in the interface. interface A{ a:number; b:string; }; let originalArray:A[] ...

typescript

The 'any' type is not compatible with constructor functions

I am currently working on implementing a class decorator in Typescript. I have a function that accepts a class as an argument. const createDecorator = function () { return function (inputClass: any) { return class NewExtendedClass extends inputClass ...

typescript

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the ta ...

angulartypescriptrxjs

Mastering Ember with Typescript - crafting action definitions

Trying to set up my first Ember app using TypeScript, I'm facing issues with defining actions. Most tutorials suggest using the @action decorator like this: import { action } from '@ember-decorators/object'; @action sayHello(){ } However, ...

typescriptember.js

unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet: this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe( resp => { this.ag ...

angulartypescriptasynchronoussubscription

Create a TypeScript variable that has a type definition allowing for the inclusion of null

I am dealing with the type definition below, which was created by a framework: export type SecretCategory = { 'Password' : null } | { 'Note' : null } | { 'Document' : null }; What is the best way to declare a variable of type ...

typescript

Utilize checkboxes for executing send operations and implementing prevention measures in Angular 9

I'm currently working with Angular 9 and I am facing an issue with a form that includes a checkbox. The form is designed in a way that when the user clicks the save button, it should fill in the name field. However, I have noticed that when the checkb ...

angulartypescript

Concealing Dropdown Box Information Based on a Customized List in Angular

Is there a way to remove an item from a dropdown list once it has been selected? For example, if I have a dropdown box with options 'Dog', 'Lion', and 'Cat', how can I make it so that once I select 'Dog', it will no ...

angulartypescriptrxjs

Creating a ref with Typescript and styled-components: A comprehensive guide

Trying to include a ref into a React component looks like this: const Dashboard: React.FC = () => { const [headerHeight, setHeaderHeight] = useState(0); const headerRef = React.createRef<HTMLInputElement>(); useEffect(() => { // @ts ...

reactjstypescriptstyled-componentsref

Struggling with setting up the onChange function in a Next.js application

After successfully writing and testing the code here, I encountered an error preventing me from building it. Please review the code for any issues. I am attempting to set onChange to handle user input in a text field. Currently using onChange={onChange}, ...

reactjstypescriptnext.js

Extracting the Hidden Gems in a Nested Object

My goal is to extract a specific value from a two-level deep object data structure. To begin, I am storing the data in a variable within a function, like so: getTargetId() { if (this.authenticationService.isAuthenticated()) { const userInfo = ...

javascriptparsingtypescript

Issues with the functionality of CSS Modules and hover styles_integration

After creating a react web-app with a custom build - including webpack, webpack-server, typescript, image-loaders, css, scss, and css-modules - I encountered an issue with CSS pseudo elements. The hover effect is not working as expected. .image { height ...

cssreactjstypescriptwebpackcss-modules

Pushing an object into an array that is a state object in React using Typescript, the proper way

I am working on maintaining an array of objects stored in a state object. Each time the Add button is clicked, I need to push a new object to this array and store it. However, I am facing issues with fetching proper values when trying to submit. Where cou ...

arraysreactjstypescript