I have a component whose 'id' is auto-generated. I want to replace that id with my own for styling purposes. I'm unable to use class for styling as the class is used by bunch of other components.
Ext.query('.q-superdate-field')
that results into:
<input type="text" size="16" autocomplete="off" id="ext-comp-1100" name="ext-comp-1100" class="x-form-text x-form-field q-superdate-field x-form-empty-field x-trigger-noedit" readonly="" style="width: 100px;">
I want to change the width of the input field using id. Is there a way to replace exisiting 'Id' and create one of our own
to change id dynamically
Ext.select('.q-superdate-field').elements[0].id = 'newId';
Note: this is not best approach my answer is just for you question.
Related
How do we write input fields on AngularJS page which has Onetomany mapping?
User Class has Name and phone attributes and can have multiple phone numbers.
AngularJS code for fName input field
<input tabindex="10" style="width: 60%;" type="text" ng-model="ctrl.user.fName" placeholder="First Name">
''''AngularJS code for phone mapping -as this is a OneToMany field so i have taken List in User class, now i have 3 input textfields on AngularJS page-so how do i write ng-model for the same, for first text field I have declared like below but what about second and third text fields-how to declare ng-model for phone field.
<input type="text" ng-model="ctrl.user.phone.phoneNumber" placeholder="Parking #">
The basic answer is by using *ngFor, but I'm not sure this is the best approach for your use case.
<div *ngFor="number of ctrl.user.phone.phoneNumbers">
<input type="text" ng-model="number" placeholder="enter a new number">
</div>
If you only plan to have three numbers it might be easier just to give a specific phone type to each one:
<input type="text" ng-model="ctrl.user.phone.homePhone" placeholder="Home #">
<input type="text" ng-model="ctrl.user.phone.cellPhone" placeholder="Cell #">
<input type="text" ng-model="ctrl.user.phone.workPhone" placeholder="Work #">
Finally, depending on what version of Angular you are using, you might find it easier to implement a FormControl instead of using ng-model.
so i was able to find the answer and surprisingly not much material is available on any portal regarding the same.
so the question was how to use OneToMany mapping in AngularJS and any backend like Springboot with Hibernate.
Ex User has direct columns like Name, age, DOB etc but lets say User has onetomany mapping with an object Contact (which further has phonenumber, email, emergency contact etc)
In Agular we can directly put ng-bind on name field like ctrl.use.name but for phonenumber field, it was specified in below way
ctrl.user.contact[0].phonenumber
Please note that, now in user class you have to make a setter which accept array of contacts like this-
public void setContact(Contact[] contacts){....implementation}
so now on user form i can have multiple contacts object which will be persisting as OneToMany relationship.
Suppose that I have an AngularJS component that renders inputs for a user to input their first and last name like so:
First name: <input ng-model="ctrl.firstName" required /><br />
Last name: <input ng-model="ctrl.lastName" required />
Suppose that the component is called "Name Input", and I use it as part of another form like so:
<form kendo-validator="ctrl.validator">
<name-input></name-input><br />
Quest: <input ng-model="ctrl.quest" required /><br />
Favorite Color: <input ng-model="ctrl.favoriteColor" required
</form>
The result is a form with four inputs: First Name, Last Name, Quest, and Favorite Color.
However, when I invoke validator.validate, I see that only Quest and Favorite Color get validated. I've tried to declare a Kendo UI validator for the Name Input component, but it doesn't work. At runtime, the validator declared inside the Name Input component is undefined.
The only solution I've come across that seems reasonable is to use validator.validateInput on each input, as described here: https://www.newventuresoftware.com/blog/code-bites-validate-any-dom-element-with-kendoui-validator
In this case, I think I would have to invoke validator.validate to validate Quest and Favorite Color, but I would have to invoke validator.validateInput twice for the two inputs inside the Name Input component.
This seems like it could work, but it's very un-DRY. The problem is that if I use validator.validateInput in ten different forms that use this Name Input component, and then in the future, I add a "Middle Name" input to the Name Input, then I must go back and add an additional validator.validateInput invocation everywhere I've used the Name Input component.
What is a better way to dot his?
In my case, giving name attribute to each input will do the trick.
First name: <input name="firstName" ng-model="ctrl.firstName" required /><br />
Last name: <input name="lastName" ng-model="ctrl.lastName" required />
Working example
If the component is used repeatedly inside the same form, just pass the name as binding data into component.
Working example
Lets say I've got the following form with two input elements.
Title:
<input type="text" ng-model="detail.message.title">
Description:
<input type="text" ng-model="detail.message.description">
To get Cypress.io to fill in the text input I should use code like
cy.get('<selector>').type('Here the data for the title')
The text input has no class, name or ID so I was wondering if it would be possible to select text input using the 'ng-model' attribute?
Try attribute selector input[ng-model="model name here"]and see if it is working.
ex:
cy.get('input[ng-model="detail.message.title"]').type('Here the data for the title')
Note: It is entirely based on your requirement but I feel this is not recommended, Instead you can add a class or ID and use respective selector, because if the attribute value changes in future then you have to change in Cypress as well.
I am generating a form dynamically in my application. The fields of the forms are the column names in the database table.The user of this application will just pass the name of the table and the skeleton for CRUD application will be prepared dynamically.
In the view part I want to achieve something like this
<div class="form-group" ng-repeat="(key,col) in cols">
<label for="{{::col}}">{{::col | uppercase | replaceUnderscore}}</label>
<input class="form-control" type="text" ng-model="{{::col}}" required />
</div>
In the ng-model I just need the string value that is, if the column name is Username then model value should be something like ng-model="username" and the value should not be displayed in the form field. So I want to achieve kind of one way data binding.
Simply use a JS object, for example $scope.data = {}, and then ng-model="data[col]".
I need help in finding an element using Selenium WebDriver. I have tried all the possible selectors, but I am unable to locate the element.
FYI. id="ext-gen26" is not constant, this will change every time when the new page is loaded.
Tried Selectors:
By.xpath("//button[#class=\"x-btn-text\"]/text()='Find Accounts'")
By.cssSelector(input[name='id'])
By.id("ext-gen26")
Code:
<div id="x-form-el-ext-gen26" class="x-form-element" style="padding-left:155px">
<input id="ext-gen26" class="x-form-text x-form-field " type="text" name="id"
autocomplete="off" size="20" style="width: 212px;">
</div>
I want to locate Account ID element and send text to located element.
Appreciate if you can please shed some lights.
Does the div's id change everytime you load a new page too ?
I suggest to you to write something like that :
css Selector : "div.x-form-element input"
But, if you have a lot of div with x-form-element as class value, you can use the nth-child() function. like :
css Selector : "div.x-form-element:nth-child(n) input" // n is the position order of your div that has x-form-element as class value.
nth-child() documentation
Here is my approach: use ExtJS component query on client side to get the ID, then use the ID to locate WebElement. To send keys, you usually need to dig one level deeper to get the "inputEl". Java Code sample:
//a fully qualified ExtJS component query that will return one match only
String query = "viewport #panel1 textfield[fieldLabel='Test Field']";
//use component query to find id
String js = "return Ext.ComponentQuery.query(\"" + query + "\")[0].inputEl.id;";
String id = (String) ((JavascriptExecutor) _driver).executeScript(js);
WebElement element = driver.findElement(By.id(id));
element.sendKeys("it works");
Your application under test must be having labels behind input fields, combo boxes, check boxes etc.
Please try something like below, considering you application is having label as "Account ID"
(//*[text()='Account ID']/following::input)[1]
HTML code will looks like this-
<html>
<div id="x-form-el-ext-gen26" class="x-form-element" style="padding-left:155px">
<label>Account ID: </label>
<input id="ext-gen26" class="x-form-text x-form-field " type="text" name="id"
autocomplete="off" size="20" style="width: 212px;">
</div>
</html>
This kind of xpath will never fail unless there is change in label.