Is there a way to verify the presence of the modified outcome in Protractor?

I recently edited an item and here is my code:

let articleName = $('[placeholder="Article name"]');
articleName.click().clear().sendKeys('Test Item Edited');
saveItem.click();

However, when I attempt to verify the test case with:

expect(articleName.getText()).toContain('Test Item Edited');
or
expect(articleName.getAttribute("Test Item Edited")).toEqual('Test Item Edited');

an error is displayed stating "Expected '' to contain 'Test Item Edited'."

Upon further investigation, it appears that in the source code, the article name cannot be found after editing. Could this be the reason for the error?

<input _ngcontent-c30="" class="mat-input-element mat-form-field-autofill-control ng-pristine ng-valid ng-touched" matinput="" required="" maxlength="80" pattern="[A-Za-z0-9 ]{1,80}" id="mat-input-611" placeholder="Article name" aria-invalid="false" aria-required="true">

As a newcomer to protractor, I am unsure of how to address this issue.

Answer №1

The problem lies in your use of the getAttribute() method. Instead of using this method to retrieve text from a textbox field, you should utilize the value attribute.

Therefore, your assertion with the expect function should be as shown below-

expect(articleName.getAttribute('value')).toEqual('Test Item Edited');

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

Data fetch error: Mount data could not be retrieved due to an undefined

While working with my database, I encountered an issue where the data needs to be accessed before the component mounts in order for the page to display properly using the componentDidMount() lifecycle method. Upon testing, it was confirmed that if I remo ...

Update the path dynamically in Next.js without the need to reload the page

Every time the user clicks on the continue button, a function is triggered. Within that function, I make the following call: push("/signup/page-2", undefined, { shallow: true }); All dynamic routes resembling /signup/[page].js that return <Component / ...

The cube from Three.js refuses to render after being bundled with Webpack in a Wordpress environment

I am facing an issue while trying to incorporate three.js with WordPress using webpack. The problem lies in the fact that the 3D cube is not showing up inside the canvas. <div class="div" id="canvas"></div> appears to be em ...

Create a new JavaScript object by parsing JSON data

I am looking to achieve the following: var my_data = { x : 'orange', y : 2 } function object(data){ this.x = 'banana'; this.y = 3; this.z = 'default value'; } once I have executed: var new_instance = ob ...

"Transmitting an ajax POST call and receiving a corresponding GET response

Currently, I am utilizing the following AJAX code: $.ajax({ url: "Editor.aspx/Page_LoadComplete", data: { "contentCheckCode": contents }, type: "POST", success: function (response) { alert("Contents saved..."); }, error: fu ...

Error message: Modal.dispose function not available in Bootstrap 5 Symfony 5.3 issue detected

I have been working on creating a modal using Symfony 5 and Bootstrap 5. I want the form fields to be cleared when the modal is closed. Below are the relevant files. I am encountering an error when trying to close the modal: Uncaught TypeError: myModal.dis ...

Utilizing an Ajax request for a polling system

I am in need of adding a polling mechanism to call a web service from my webpage. To achieve this, I am attempting to utilize an ajax call within a javascript page. However, I am fairly new to both ajax and javascript. Below is the code snippet that I have ...

The error message "Property 'push' of undefined in AngularJS" occurs when the push method is being called

I'm currently working on developing a basic phonebook web application to enhance my knowledge of Angular, but I've encountered an issue with this error message - "Cannot read property 'push' of undefined". Can anyone help me identify th ...

Ways to exit the current browser window?

Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...

Beginner's guide to integrating the @jsplumb/browser-ui into your Vuejs/Nuxtjs project

I am working on the integration of @jsplumb/browser-ui community edition into my application. After receiving a recommendation from the team at jsplumb, I decided to utilize @jsplumb/browser-ui. However, I am facing difficulty in understanding how to begin ...

Troubleshooting the Ng2-Charts Linechart to display all values instead of just the first two

Starting a new Angular application with the Angular-CLI (beta 22.1) has presented an issue when adding test data (5 values) to a chart. The scaling appears incorrect, displaying only the first two values stretched across the entire length of the graph (ref ...

Troubles encountered when populating the array within a Vue component

I am experiencing an issue with my ProductCard component where the addItem method is not successfully adding a new item to the array. <template> <div class="card"> <div v-for="item in TodoItems" :key="item.id ...

discovering the category for the .click function

After retrieving a list of book objects from a JSON object, I am in the process of displaying them on an HTML page by creating buttons with titles. The goal is to alert the URL of the book when a button is clicked. However, I am facing an issue with access ...

What is the best way to integrate various JQuery and DataTables functionalities and organize them in a specific order

I managed to implement some features into jQuery datatables by following tutorials. However, I am struggling to combine these features and make them work together seamlessly. If you search for these features online, you will likely find where they originat ...

Can JavaScript be used to retrieve time information from a central location?

In the process of developing a PhoneGap application, I am restricted to using only HTML, CSS, and JavaScript. I am seeking guidance on how to retrieve time information from a centralized server using strictly JavaScript. Is it possible to achieve this by ...

JavaScript closing of a window

I've been dealing with this issue for the past few hours. Currently, I am utilizing the iframe version of LightFace modal windows: http://davidwalsh.name/facebook-lightbox The problem I'm encountering is the inability to close the modal from w ...

Leverage i18n-2 within Node.js without utilizing the res scope

Is there a way to utilize i18n within functions that are called? I am currently facing an error: (node:15696) UnhandledPromiseRejectionWarning: TypeError: i18n.__ is not a function How can I ensure that i18n will work inside functions without having to b ...

Combining THREE.Sprite with fog or utilizing THREE.ParticleSystem with an array of texture maps

Currently attempting to create a particle system using Sprite, however, encountering an issue where Sprite does not appear to respond to the "fog" parameter, meaning it does not fade away with distance. While ParticleSystem does adhere to the fog parameter ...

Error: The method 'text.substr' is not a valid function

Seeking assistance with creating a reusable component for implementing a readmore function in my application. I've encountered an issue that I can't seem to figure out. Could this be a specific feature of NextJS? Any insights or suggestions would ...

Ways to eliminate submenu tooltips

Whenever I hover over a menu item with submenu pages in the wordpress backend, a "tooltip" pops up showing each submenu page. How can I remove these tooltips? I have attempted to remove the wp-has-submenu style class, which somewhat works. The tooltip no ...