Issue with by.cssContainingText function not performing as intended

I have a container that I want to be able to click on. Here's how it looks:

<div class="CG-Item CG-B-Left ng-binding" ng-bind="SPL.showTitleText">My New SPL</div>

So I am trying to use this code to click on it:

element(by.cssContainingText('.CG-Item', 'My New SPL')).click();

But it's giving me an undefined result. Could I be overlooking something? The scenario seems similar to what's in the documentation.

https://www.protractortest.org/#/api?view=ProtractorBy.prototype.cssContainingText

Edit: I forgot to mention that there is an ng-bind attribute in the HTML element when I initially posted. I think that might be why it wasn't working.

javascriptangularjsprotractor

Answer №1

Maybe you should give element.all(by.cssContainingText('div', 'My New SPL')).first().click() a shot

Answer №2

Switching from using just element to using element.all really made a difference for me.

Answer №3

When using the element.all() function, it will return all the elements that match the locator condition. In order to interact with a specific element, we need to use indexing or other built-in methods to first select the desired element.

element.all(by.repeater('result in memory')).get(1).click();
element.all(by.repeater('result in memory')).first().click();

On the other hand, when using the element() function, it will return a single element that matches the locator condition. This allows us to directly interact with the element without the need for additional steps.

element(by.id("someID")).click();

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

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

javascriptjqueryhtmlcss

Creating a horizontal line with text centered using Angular Material's approach

Implementing Angular Material, my objective is to design a horizontal line with a word positioned in the center. Similar to the one showcased here. I experimented with this code, achieving a close result, but I aim to align the lines vertically to the mid ...

cssangularjsangular-material

Tips for effectively utilizing JavaScript regex to precisely match a string before triggering the submit button

I have a form in Angular with a text input field that requires the entry of lowercase letters separated by commas, like this: c, d, e, g, a, f etc... Currently, the submit button activates as soon as any part of the input matches the required format, allo ...

javascriptregexangularjs

Is there a way to include multiple web parts that utilize an angularjs module?

How do I incorporate multiple web parts in SharePoint using AngularJS modules? I have a web part where I've utilized AngularJS. The issue arises when attempting to add this web part multiple times on a page - separating the Angular module names poses ...

angularjssharepoint

Bandcamp API sales data retrieval feature

Looking for assistance with a call to the Bandcamp API. Every time I request /http://bandcamp.com/api/sales/1/sales_report/, I receive this message in the response: /"error_message":"JSON parse error: 757: unexpected token at ''/ ...

javascriptjsonapigoogle-apps-script

Meta tag information from Next.js not displaying properly on social media posts

After implementing meta tags using Next.js's built-in Head component, I encountered an issue where the meta tag details were not showing when sharing my link on Facebook. Below is the code snippet I used: I included the following meta tags in my inde ...

javascriptreactjsnext.jsmeta-tags

Eliminate specific content from within a div tag

Looking for a solution with the following HTML. <div id="textDiv"> <p> MonkeyDonkey is not a bird. Monkey is an animal. </p> </div> In this case, I am trying to delete the word "Donkey". I attempted the code below but it did no ...

javascriptjquery

The $().bind function will not function properly unless the document is fully loaded

Do I need to include $(document).ready() with $().bind? Here is the HTML portion: <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src=&quo ...

javascriptjqueryhtmlevent-handling

Adding text with jQuery

Currently, I am utilizing the Jquery text editor plugin known as JqueryTE. While adding some functions to it, I have encountered a roadblock. Specifically, I am attempting to insert additional text into the source of the textarea but have been unsuccessfu ...

javascriptjqueryhtml

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

I need to display my JavaScript Object Data in a table format with pagination and sorting capabilities. I have chosen the DataGrid component from Material UI, but I am encountering some errors. Below is the code snippet: import React from 'react&apos ...

javascriptreactjsdatagridmaterial-ui

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

javascriptcssreactjscss-grid

Angular fails to update input changes once ajax auto-complete populates several fields

I am currently working on a project that involves using jquery auto-complete with ajax to automatically populate 3 input fields: Product Code, Description, and Price. Additionally, there are two other fields, Quantity and Total, which utilize angular. How ...

jqueryangularjs

Use angular-resource to add a new entry to the db.json file

I have a JSON file called db.json with the following structure: { "menu":[ { "id":0, "item":"item1" },{ "id":1, "item":"item2" },{ "id":2, "item":"item3" } ], "feedback":[] } Currently, I am using Angular's $resource to send a Jav ...

javascriptangularjsjsonrestangular-resource

Is it possible to use JavaScript to load, edit, and store text files?

Hey there, I have a text file that needs some find and replace operations done on it within the browser. My coding skills are still in the beginner stage, so creating web apps from scratch feels overwhelming right now. All I want to do is upload the file, ...

javascriptregexhtmltextfileapi

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

javascriptjqueryrubyajaxruby-on-rails-3

Encountering net::ERR_CONNECTION_RESET and experiencing issues with fetching data when attempting to send a post request

I am facing a React.js task that involves sending a POST request to the server. I need to trigger this POST request when a user clicks on the submit button. However, I keep encountering two specific errors: App.js:19 POST http://localhost:3001/ net::ERR_CO ...

javascriptnode.jsreactjsexpressreact-hooks

How to troubleshoot missing API data in a Bootstrap 5 modal

I am currently working on a project involving a Pokemon API where I have successfully built the front end using .fetch(). My goal is to create an additional modal that displays some stats. However, I am struggling to get the data from the API to show up in ...

javascriptjquerybootstrap-modalfetch-apibootstrap-5

How can we detect line breaks within a selection using JavaScript?

Apologies for the lack of expertise in the content below, as it is being produced by a designer experimenting with coding :D The goal here is to determine the number of lines selected or highlighted by the cursor. When I mention "lines," I mean what is vi ...

javascripthtml

Using Bootstrap multiselect, you can easily control the display of a second menu based on the selection in the first menu

On my website, I am working with two menus. When I select Abon from the first menu, it should display all li elements under the Abon optgroup (Abon-1, Abon-2). If I uncheck block in the second menu, those elements should disappear. The code consists of Sel ...

javascriptjqueryhtmltwitter-bootstrap

Ways to verify that a javascript function generates an object and executes a method within that object

Currently, I am in the process of updating server code written in nodejs and incorporating unit tests into the mix. However, I have encountered a challenge that I need assistance with: classX.prototype.methodX = function () { // Create new session ...

javascriptnode.jsunit-testingsinon