Getting the following error " WebDriverError: unknown error: a.tagName.toUpperCase is not a function" - protractor

When I tried to enter a text in the below input field I am getting the error although it displayed in the window. The following input element html code is given below. I couldn't understand the reason for the error and unable to find the solution " WebDriverError: unknown error: a.tagName.toUpperCase is not a function"
<input type="text" ng-model="$ctrl.tag.name" ng-if="$ctrl.isSelectedMode" autofocus="autofocus" ng-blur="$ctrl.saveTagName()" name="tagName" ng-keyup="$ctrl.escapeEditing($event)" form-validator="$ctrl.tagName.uniqueError.validator" class="ng-valid ng-valid-uniqueness ng-not-empty ng-dirty ng-valid-parse ng-touched" autocomplete="off" style="">
I have written code in Page Object Model
this.AddTag = function(tagname1,tagname2,tagname3){
let clickAddTag = element(by.xpath("//*[text()='Add Tag']"));
clickAddTag.click();
browser.sleep(2000);
let AddTag = element(by.xpath("//input[#name='tagName']"));
if(AddTag.isPresent()){
AddTag.sendKeys(tagname1);
AddTag.sendKeys(protractor.Key.ENTER);
clickAddTag.click();
AddTag.sendKeys(tagname2);
AddTag.sendKeys(protractor.Key.ENTER);
clickAddTag.click();
AddTag.sendKeys(tagname3);
AddTag.sendKeys(protractor.Key.ENTER);
}
In specs I am calling the method
BidConfiguration.AddTag('tag1','tag2','tag3');

It's because you are trying to uppercase not string but HTML element.
more less stg like that:
element(by.xpath("//*[text()='Add Tag']")).toUpperCase();
You probably want to change text of the element to uppercase.
Try:
element(by.xpath("//*[text()='Add Tag']")).getText().then((elementText) => {
console.log(elementText.toUpperCase());
});

I found the solution
use actions class with sendKeys
browser.actions.click(element).sendKeys('text').perform();

Related

Problem in calling a value through the value property

** <input type="number" id="userGuess" />**
I have created an input on the line above
And through the line below, I have put it in a variable
const userValue = document.querySelector('#userGuess').value;
But when I enter a value in input the web page. It does not print
console.log(userValue)
I expect, when I enter a value in the generated input. I can get it through console.log or** alert**

Validating optional fields in react using Zod

Using react-hook-form, and zod within a Next.js project. Trying to get .optional() to work. It works with simple strings. See the schema below.
//works
const FormSchema = z.object({
website: z.string().optional()
});
But it does not work when I add the .url() flag. It only checks for the valid url. If the field is blank, it throws an error. In other words, the field is no longer optional. It accepts a valid url, but not a blank input field. Of course I want it to accept a blank input and a valid url as the only valid inputs.
//not working. the field is no longer optional.
const FormSchema = z.object({
website: z.string().url().optional()
})
Perhaps the problem has to do with the input field returning the wrong data-type when it's blank?
<label className="block">
<span className="block text-white">Website</span>
<input
id="email-input"
type="text"
className={`block border text-lg px-4 py-3 mt-2 border-gray-200 focus:bg-white text-gray-900 focus:ring-purpleLight focus:ring-2 outline-none w-full disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
{...register("website")}
disabled={isSubmitting}
placeholder="Website"
value={undefined}
/>
</label>
{errors.website && (
<p className="mt-1 text-sm text-red-600">
{errors.website.message}
</p>
)}
Perhaps the problem has to do with the input field returning the wrong data-type when it's blank?
I think this is likely your problem, although I'm not familiar with what react-hook-form might be doing to transform the input before handing it to your schema. The empty field will have the empty string '' as a value when it's blank. If you just use zod directly:
z.string().optional().parse(''); // succeeds because '' is a string
// Whereas this will fail because although '' is a string, it does not
// match the url pattern.
z.string().url().optional().parse('');
.optional() allows for the input value to be undefined so for example:
// These will both successfully parse because of `optional`
z.string().optional().parse(undefined);
z.string().url().optional().parse(undefined);
Going out slightly on a limb here, but if you wanted '' to pass you could add a preprocess step where you convert '' to undefined:
const s = z.preprocess(
(arg) => (arg === "" ? undefined : arg),
z.string().url().optional()
);
console.log(s.safeParse("")); // success (data: undefined)
console.log(s.safeParse("test")); // failure (not a url)
console.log(s.safeParse(undefined)); // success (data: undefined)

Excepted int for property "maxLength" of sap fiori Input component

Current I am trying to metadata binding xml, following this blog. When I did the maxLength of Input. But I got the following error.
error screenshot
demo service
init model with destination:
initModel: function() {
var sServiceUrl = "/odsrv/V2/Northwind/Northwind.svc/";
var oModel = new OM(sServiceUrl, true);
this.setModel(oModel, "oRefModel");
sap.ui.getCore().setModel(oModel, "oRefModel");
}
xml view:
<content>
<Label text="{oRefModel>/#Category/CategoryName/#type}"/>
<Input maxLength="{oRefModel>/#Category/CategoryName/#maxLength}"/>
</content>
The Label for type works fine if remove Input.
How to solve this problem...
Version with expression binding could be like that
<Input maxLength="{= isNaN(${oRefModel>/#Category/CategoryName/#maxLength}) ? 0 : parseInt(${oRefModel>/#Category/CategoryName/#maxLength})" />
typeof check is needed cause at the start of binding process value of property probably is 'NaN' and it gives an error and whole process will stop.
If you can improve that version please do :)
<Input maxLength="{parts:[{path:'oRefModel>/#Category/CategoryName/#maxLength'}],formatter: 'your.formatter.toNum' }" />
Formatter Code
toNum : function(maxlen){
return parseInt(maxlen);;
}
Converting string to integer is the key
Even shorter and without writing a custom formatter function: Use the built-in parseInt function.
<Input
maxLength="{
path: 'oRefModel>/#Category/CategoryName/#maxLength',
formatter: 'parseInt'
}" />
For some reasons expression binding does not work, maybe someone could tell me why:
<Input maxLength="{= parseInt(${oRefModel>/#Category/CategoryName/#maxLength}) }" />

How to Use sendkeys when input type is number with Chrome

HTML
<ion-input [(ngModel)]="login.username" ngControl="username1" type="number" #username1="ngForm" id="userName" required>
</ion-input>
PROTRACTOR TEST CODE
let usern: ElementFinder = element.all(by.css('.text-input')).get(0);
usern.sendKeys('error');
expect(usern.getAttribute("value")).toEqual("error");
browser.sleep(500);
usern.clear();
browser.sleep(1000);
usern.sendKeys('12345');
The element is found but no text is entered into the field. If I change the element to type="text" the protractor command works.And the page view is 'e' and can't be clear.
Secondly if I send string like this: "we2124will", the actually send data is '2124' and the result from getAttribute("value") is 2124.
Thirdly even if I changed the sendKeys to number, the result is not full number string. For example:
Failures:
1) Login page should input username and password
Message:
Expected '125' to equal '12345'.
Stack:
Error: Failed expectation
There are some number missing.
Since you're using an <ion-input>, the actual HTML <input> tag will be nested within, and it won't have an id attribute. The effect is that the wrong element can get selected.
Try something like below to grab the nested input tag:
let username = element(by.id('userName')).all(by.tagName('input')).first();
username.sendKeys('fakeUser');
That worked for me.
As a workaround, you can introduce a reusable function that would perform a slow type by adding delays between send every key.
First of all, add a custom sleep() browser action, put this to onPrepare():
protractor.ActionSequence.prototype.sleep = function (delay) {
var driver = this.driver_;
this.schedule_("sleep", function () { driver.sleep(delay); });
return this;
};
Then, create a reusable function:
function slowSendKeys(elm, text) {
var actions = browser.actions();
for (var i = 0, len = text.length; i < len; i++) {
actions = actions.sendKeys(str[i]).sleep(300);
}
return actions.perform();
}
Usage:
var elm = $("ion-input#userName");
slowSendKeys(elm, "12345");
What version of protractor are you using?
Not sure this is the issue but try grabbing the element by ng-model
var elem = element(by.model('login.username'));
elem.sendKeys('error');
expect(elem.getAttribute("value")).toEqual("error");
elem.clear();
elem.sendKeys('12345');
expect(elem.getAttribute("value")).toEqual("12345");

No element found using locator: by.model() error

I'm writing an end to end test using protractor for my application. I'm seeing errors of the form:
No element found using locator: By.model("address.fullName") error.
The corresponding protractor code which is throwing this error is:
var angularElement = element(By.model("address.fullName"));
angularElement.sendKeys("test");
However I'm able to fetch this element using:
var angularElement = element(By.xpath('//input[#ng-model="address.fullName"]'));
HTML snippet:
input ng-model="address.fullName" type="text" class="control-input ng-pristine ng-invalid ng-invalid-required" size="40" name="fullName" ng-class="{ 'required-field': isInformationSubmitted }" required=""
I'm not sure why this is happening. Any ideas?
I've had some close errors, my error occurred cause the item was not shown on the page or protractor did not finish updating its model so before using the variable i:
-maximized the page: If the element was unseen
browser.manage().window().maximize();
-opened the list the item was in:
-waiting for protractor to finish updating it's model:
var ptor = protractor.getInstance();
ptor.waitForAngular();