Looking for Protractor CSS functionalities nodes

I tried the code below but am having trouble locating the "Login" text using Protractor:

<div _ngcontent-c2="" class="align-center">
  <img _ngcontent-c2="" alt="Autoprax" class="ap-logo" src="/images/apLogoSmall.svg" style="width: 100%">
  <h2 _ngcontent-c2="">Login</h2>
</div>

My attempt to find it using Protractor is as follows:

    it('Check Proper Login Page', function() {
    var login = element(by.nodeName('[.H2="Login()"]'));
    expect(login.getText()).toBe('Login');

Any help would be greatly appreciated

htmlcssangularprotractor

Answer №1

Make sure to adjust your selector to by.css('.align-center h2') for accuracy.

Consider assigning classes and ids to your elements to improve Protractor's ability to locate them. While the current selector may function in a small snippet, using a generic class like .align-center could lead to failures on larger pages.

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

Creating TypeScript unit tests for nested functions: A step-by-step guide

I'm currently working with Angular 16 in combination with the ngRx framework. My development involves TypeScript coding and writing unit tests (.spec.ts) using Jasmine, especially for code similar to the example below. How do I invoke this method with ...

angulartypescriptngrx

What is the process for making a local storage item accessible to others on a network?

Can a local storage item be accessed from any computer on the network using the same Google Chrome extension that was previously set up? ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Is your CSS failing to synchronize with HTML?

Greetings from MyWebsite.html! <DOCTYPE !html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <link rel="stylesheet" href="MyWebsite ...

htmlcss

The tag 'ngRedux' is not recognized as a property on the 'AppModule' type

After working tirelessly to integrate redux into angular6, the application is functioning smoothly. However, an error is being thrown in the node cli - 'Property 'ngRedux' does not exist on type 'AppModule'. Whenever I include N ...

angularreduxreact-reduxangular6

Stopping the <nav> element from displaying as "unlabeled section" on HTML5 webpages

As I work on incorporating proper sectioning in HTML5 with sectioning elements and headlines to meet my customer's design goals (while adhering to certain restrictions), I have encountered a challenge. The basic layout requested is as follows: <b ...

htmlnavigationsemanticsnav

The specified selector is invalid or illegal in HTMLUnit

Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...

javajavascriptcsshtmlunitweb-crawler

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

Discovering instances of a specific string within a larger string

My goal is to customize the default behavior of the alert function. Below is the code I am using: window.alert=function(txt) { waitOk='wait'; setMsgBox(txt); btnMsgOk.focus(); } However, I need this functionality to vary ba ...

javascripthtml

Issue arises when attempting to submit multiple form fields with identical 'name' attributes, preventing the fields from being posted

Currently, I am facing a challenge with old HTML/JavaScript code. Some parts I have control over, while others are generated from an external source that I cannot manage. There is a form created dynamically with hidden fields. The form is produced using a ...

javascripthtmljspmootools

Dynamic value for href in div using Angular

Implementing a dynamic submenu using Angular is my current project. At the moment, I have set the href attribute with hardcoding as shown below: <ng-template #preSelectionMenuItem let-preSelections="preSelections"> <div class=' ...

htmlangular

Sending JSON Object using NavController

I am trying to send a JSON Object to another Page in my Ionic 2 application. However, when I attempt to do so, I encounter the error: Cannot read property 'user' of undefined. While researching for a solution, I came across a similar question ...

jsonangularionic2

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

htmlcss

Both an Angular and Java application seamlessly operating within a single domain

Recently Updated: Project 1: PHP, HTML, CSS, Java, mySQL Project 2: Angular, Spring Boot, PostgreSQL I am currently working on breaking off a part of Project 1 into a separate project (Project 2) that will operate independently with its own database. ...

javaangular

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...

javascripthtmlcssreactjscomponents

Achieving compatibility with IE7 for utilizing "before:" and "after:" pseudo-elements along with the "box-sizing:border

My website is constructed with twitter bootstrap 3 and functions perfectly on all browsers except for IE7. IE7 seems unable to interpret pseudo classes like before:, after:, and box-sizing: border-box. Is there a solution to make IE7 understand this code ...

cssinternet-explorer-7twitter-bootstrap-3

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated

Although this issue has been discussed before and was previously considered a bug, I am currently using jQuery v1.11.0, which should have resolved it. The problem I am encountering is that when my page loads, there is supposed to be a slide-in effect (as a ...

javascriptjqueryasp.nethtml

:first-child that does not have the class .disabled

Does anyone have a solution for selecting the initial item in a list that does not possess the "disabled" class? ...

css

Is jQuery the solution for tidying up messy HTML code?

Is there a way to clean up this markup using jQuery? <span style="font-size:19px"> <span style="font-size:20px"> <span style="font-size:21px"> Something </span> </span> </span> I'm looking to tra ...

jqueryhtml

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if