Steps for clearing input field with type=date in Protractor:

I am currently working with protractor version 4.0.4 and I'm encountering an issue where I cannot clear a date input field. It seems like Chrome is introducing some extra controls that are causing interference.

You can find further details about Chrome's handling of the date type input here

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

A discussion about this problem can also be found on GitHub, but none of the suggested solutions have worked for me.

https://github.com/angular/protractor/issues/562

In the meantime, I have attempted the following methods
1) element.clear()

However, this results in an error message stating "Element must be user-editable in order to clear it"

2) 

element.sendKeys(protractor.Key.BACK_SPACE)

This action seems to only select the month portion of the input without actually deleting anything

Is there any alternative way to effectively clear date input fields using Protractor that I might be overlooking?

javascriptangularjsselenium-webdriverprotractorselenium-chromedriver

Answer №1

Trying to input a date using element.sendKeys may not always work reliably on a date input field. It seems to focus on the center of the input before sending the keys, so manually positioning the cursor with the LEFT and RIGHT keys can help.

For example, to enter the date 12/07/2016:

var LEFT = Key.LEFT, RIGHT = Key.RIGHT, DELETE = Key.DELETE;

element.sendKeys(LEFT + LEFT + LEFT + "12072016")

If you need to clear the date, you can use the following code:

var LEFT = Key.LEFT, RIGHT = Key.RIGHT, DELETE = Key.DELETE;

element.sendKeys(LEFT + LEFT + LEFT + DELETE + RIGHT + DELETE + RIGHT + DELETE)

Keep in mind that you might have to adjust the key combinations based on the format of the date input.

Alternatively, you can use JavaScript to clear the date, but remember that it won't perfectly replicate a user's actions:

browser.executeScript(function(elem) {
  elem.value = '';
  elem.dispatchEvent(new Event('change'));
}, element);

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

Selenium agrees to accept cookie notification

I've been facing this issue for a while now where I am trying to give consent to a pop-up using Selenium, but the consent button is not being clicked. Things I have attempted: WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH,&apos ...

seleniumselenium-webdrivercookiespopup

Error code E11000 is indicating that a duplicate key issue has occurred in the collection "blog-api.blogs" where the index "id_1" is

Issue with Error E11000 duplicate key error collection: blog-api.blogs index: id_1 dup key: { id: null } Encountering an error when trying to insert data after initially inserting one successfully. Referencing the blogSchema.js: const mongoose = req ...

javascriptnode.jsmongodb

"Did you come across `item()` as one of the methods within the array

While studying the book 'JavaScript and jQuery Interactive Front-End Web Development', I came across this interesting sentence: You can create an array using a different technique called an array constructor. This involves using the new keyword ...

javascriptarraysmethods

Running only failed tests in Protractor can be achieved by implementing a custom script that

I've encountered a problem in my JavaScript file where some of the test cases fail intermittently, and I want to rerun only those that have failed. Is there any feature or solution available that can help with this issue? It's quite frustrating a ...

javascriptseleniumprotractor

Explain the operation of recursive function calls in JavaScript

I’ve been working on converting the algorithm found in this Python code snippet into JavaScript. function divide(arr, depth, m) { if (complements.length <= depth) { complements.push(2 ** (depth + 2) + 1); } var complement = comple ...

javascriptpythonrecursion

Adjust the horizontal position of the background by +/- X pixels

Is there a way to adjust the background-position by a specific distance, say 20px, from its original position? For example: $(".selector").animate("slow").css("backgroundPosition", "center -=20px"); (Unfortunately, this approach doesn't yield the d ...

javascriptjquery

Managing user input in Node.js

Users are required to input a URL in the form (e.g: "") and I need to be able to access and read the content from that URL. I am uncertain about my current method. What should I enter in the URL field below? var options = { url: '....', ...

javascriptnode.jsexpress

The OnChange event seems to be malfunctioning as it is not being triggered despite other parts of the code functioning properly

Check out the code snippet below: import React, { useState } from "react"; function IP() { const [ipAddress, setIPAddress] = useState(""); const handleInputChange = (event) => { const inputValue = event.target.value; // ...

javascriptreactjsreact-hooksonchange

Implementing selective image loading with HTML and angularJS

This image reveals the issue at hand Within this HTML code snippet, some of my images are displaying on the webpage while others are not. How can I go about resolving this? <img src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{ro ...

htmlangularjsangular-ui-bootstrap

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

javascriptphpjqueryhtmllaravel

Dynamically load controllers based on route groups

Is there a way to dynamically load a controller, its JavaScript file, and a template based on a route group? Here is some pseudocode that attempts to achieve this: $routeProvider.when('/:plugin', function(plugin) { templateUrl: 'plugins/& ...

angularjsangularjs-controllerangular-routing

Need to import Vue from a JavaScript file

I am relatively new to modern frontend development tools. After installing Nodejs and NPM, I successfully downloaded packages such as "jquery" and everything was working fine. However, when I installed Webpack (version 2) and created a demo configuration f ...

javascriptnpmwebpackvue.jsweb-frontend

Looking to set an object value as optional in JavaScript?

Hello, I am currently in the process of developing a web application using ReactJS with Auth0 for user authentication. In order to update user information on my backend, I am utilizing state to store the necessary data. My challenge lies in allowing eith ...

javascriptnode.jsreactjsauthenticationjsx

What is the best way to simulate a constructor-created class instance in jest?

Suppose there is a class called Person which creates an instance of another class named Logger. How can we ensure that the method of Logger is being called when an instance of Person is created, as shown in the example below? // Logger.ts export default cl ...

javascripttypescriptclassjestjsmocking

Discovering the Vue app container div attribute

I am currently working on a Java app that generates pages server-side based on certain data, such as a publisher for a specific entity. I want to develop a reusable Vue component that can call an API method to request data about the entity that is being vi ...

javascriptvue.jscomponents

No specification has been provided for the delivery

I'm currently working with the Meteor framework and I am attempting to send an uploaded file (HTML input) from the client to the server using the npm package Delivery. Below is my code: Client side : var socket = io.connect('http://0.0.0.0 ...

javascriptmeteornpmnpm-installmeteor-blaze

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js

jQuery behaving erratically following deployment to the testing server

I am encountering an issue with jQuery in a user control that utilizes a Telerik RadGrid: <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script> <script type="text/javascript"> ...

javascriptjqueryasp.netajaxtelerik-grid

Encountering a 404 error while attempting to retrieve metadata for @types/node with NPM and Protractor

Encountering an issue while attempting to install Protractor 5.1.2 using npm results in the following error: npm ERR! code E404 npm ERR! 404 Not Found: @types/node@^6.0.46 The installation command used in the root directory is: npm install <a href="/c ...

seleniumtypesnpmprotractorq

Guide to connecting a different HTML page to a thumbnail image using jQuery

let newColumnBlock = $('<div class="col-md-2">'); let newImagePoster = $('<img>'); let newSelectButton = $('<a href="secondPage.html"><button class="selectButton"></button></a>'); let movie ...

javascriptjqueryhtml