protractor: verifying the focus of a particular input field

Is there a way to check if an input field is currently in focus using protractor? I am attempting the following:

it('should focus email field', function(){
    expect(element(by.model('login.email')).getAttribute('id')).toEqual(browser.driver.switchTo().activeElement().getAttribute('id'));
});

This code appears to be effective with Chrome, but it fails when run on Firefox. Any suggestions?

Here is the error message that is generated:

[firefox #1]   2) Login page should focus email field
[firefox #1]    Message:
[firefox #1]      Expected 'login' to equal ''.
[firefox #1]    Stacktrace:
[firefox #1]      Error: Failed expectation
[firefox #1]     at [object Object].<anonymous> (/Users/Jason/Desktop/app/test/e2e/login-spec.js:38:69)
[firefox #1] 

Below is the test script that I am utilizing:

describe('Login page', function() {
    var loginURL = 'http://localhost:8090/app/#/login';
    var loginEmailField = 'login-email';

    beforeEach(function() {
        browser.get(loginURL);
    });

    it('should focus email field', function(){     
        expect(element(by.id(loginEmailField)).getAttribute('id')).toEqual(browser.driver.switchTo().activeElement().getAttribute('id'));
    });
});

Answer №1

It's important to wait for Angular before asserting anything:

beforeEach(function() {
    browser.get(loginURL);
    browser.waitForAngular();
});

Another potential issue could be related to the autofocus attribute, which has been known to have problems in Firefox. You can read more about it here:

  • Autofocus Attribute of HTML5 does not work only in FireFox when <Form><input> are loaded via Ajax. WHY?
  • Why doesn't autofocus=“autofocus” work in Mozilla Firefox?

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

Retrieve the result set rows and store them in an array as individual objects

I'm attempting to fetch data from a MySQL database using Angular and PHP. My Angular code looks like this: $http({ url: "http://domain.com/script.php", method: "POST", headers: {'Content-Type': 'applica ...

troubleshooting problems with AJAX calls and routing in Angular

I am a beginner with Angular and I recently completed a tutorial on Single Page Application development using templates imported from PHP files, along with Resource and Route modules. Below is the JavaScript code from my project: (function(){ var app ...

Having trouble parsing JSON data from $_POST while utilizing AngularJS

While working in Angular, I encountered the following scenario: var data = {}; data['name'] = "test"; data['class'] = "testClass"; $http.post('http://testURL',data,function(data){ console.log(data); }); Upon inspecting the ...

Having trouble with data retrieval from MySQL using PHP and Angular on certain mobile devices, although it functions properly on desktops and laptops

The data retrieved from the mysql database is functioning properly on desktop and laptop, but not on mobile devices. The following HTML code is present in the html file: <table class="table table-default"> <thead> <tr> & ...

Struggling to make $http post requests to PHP using Angular

I am experiencing difficulties in transferring data to my PHP file after decoding Json, resulting in an error. I need assistance in identifying where I have made a mistake. app.js $scope.formPost = function(){ $http.post('sendmail.php' ...

What is the best way to pick an option from a dropdown menu using angularjs?

Is there a way to select an item from a dropdown list in AngularJS without using ng-repeat with an object array? I can easily select an option when using ng-repeat, but how can this be achieved with a normal select list? <select class="form-control" ...

Integration of AngularJS with PHP for Seamless User Authentication

As a newcomer to angularjs, I find the Login Process a bit confusing. Every time I log in, I'm automatically redirected to a specific page that is already set in the code. I just want a simple check to see if the user is logged in. If they are, then ...

Issues with Angular authentication: HTTP POST request not being sent

UPDATE: I had a small oversight with my submit button placement, but it's all sorted out now (turns out the request wasn't sent because my function wasn't called, a classic mistake). Furthermore, the reason why authentication always succ ...

Issue with adding to lightbox feature when loading content dynamically using AJAX PHP is not functioning as expected

Hey there! I've encountered an interesting issue with my code that adds models to a lightbox. It's functioning perfectly on static pages like this one. $scope.add = function(permalink, post_id) { if (typeof(Storage) !== "undefined") { ...

What is the most efficient method for retrieving information from this JSON using PHP?

[{"id":"1",name":"Title One","players":"999"},{"id":"2","name":"Title Two","players":"100"}] What is the best way to display this information? ...

Designing motion graphics for a browser game

As I delve into learning about Node.js, Angular.js, Socket.io, and Express.js, my current project involves creating a multiplayer poker game like Texas Hold 'Em. However, despite spending a considerable amount of time browsing the internet, I have bee ...

Dealing with incoming data in a yii2 RESTful service

When sending an array using $http post, I follow this approach: var results = services.transaction('orderdetails/insert', {customer_id: $scope.order.customer_id, data: $scope.orderDetail}); The variable $scope.orderdetail ...

Invalid preflight response (redirect) error

I am a beginner in utilizing Laravel and Lumen frameworks for my projects. Currently, I am working on my first project using Lumen and attempting to create an API call from Angular. Below is the Angular code snippet: app.controller('ListCtrl', ...

Identifying the user's location within the application and dynamically loading various Angular scripts

Currently, I am working on a large-scale web application using Laravel and Angular. In this project, I have integrated various angular modules that come with their own controllers, directives, and views. One challenge I am facing is the need to load diffe ...

Converting HTML code to JSON using PHP scripting

Would appreciate your help in resolving a small issue. Although I came across this post, I am still encountering some errors: How can I convert HTML to JSON using PHP? I have created a PHP file that extracts a post from WordPress with the following forma ...

The localhost server running on port 8000 remains operational even after the successful installation of the laravel-angular boiler

Following the instructions in the documentation, I successfully installed the laravel-angular project. Using the php artisan serve command, I launched the server as expected. However, when I wanted to stop the server due to potential conflicts with my apa ...

How to Use ng-controller in AngularJS to Submit a Form with PHP

Hey there! I'm diving into AngularJS and PHP for the first time. My current project involves creating a Contact Form using AngularJs and PHP. The form is pretty straightforward, requiring users to input their First Name, Last Name, Email, and Message. ...

Expanding/Combining entities

I'm facing an issue while trying to Extend/Push/Merge an object using AngularJS. The problem arises when I attempt to extend the object, as it adds a new object with an Index of 0 and subsequent additions also receive the same index of 0. //Original ...

Analyzing the performance of a website and server application under stress conditions

Currently, I have a live streaming web page running on Localhost, showing the desktop of my other computer. I am deliberately not using a unique IP for the viewer counter in order to stress test my server. In essence, I am looking to simulate "new tabs" ( ...

Using Ionic with Ubuntu to easily connect to MySQL and PHPMyAdmin

element, My current project involves creating a mobile app using Ionic on Ubuntu. I have successfully installed and configured phpmyadmin, which is now operational at http://localhost/phpmyadmin. Can someone guide me on how to configure Ionic to connect ...