Finding all HTML elements with attribute names that starts with 'aria' - selenium

Using XPath in Selenium or BeautifulSoup in Python, how can one get the tag-names (here 'a', 'button') and the values of 'aria' attributes (here Home, True, False) by knowing that those attributes start with 'aria'
<a aria-label="Home" id="1" />
<button aria-hidden="True" id="2" />
<button aria-pressed="False" id="2" />
Currently, I have to put in all attributes one-by-one, like this
driver.find_elements_by_xpath("//*[#aria-label]")
driver.find_elements_by_xpath("//*[#aria-pressed]")
What I need is something like (which, here, isn't correct),
driver.find_elements_by_xpath("//*#[starts-with('aria')]")

Related

vee-validate Validating a non-existing field

When validating a group of fields, an error is shown for fields that are hidden in the DOM with a v-if attribute.
For example, I've got 3 fields:
<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />
When I run my submit func I'm checking that none of the fields contain errors:
this.$validator.validateAll().then(() => {
... my check
});
I see the following error:
Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#3". Use "attach()" first.
Detaching and reattaching my 'foobar' field as I update the "showMe" state seems verbose. Especially for my larger multistep forms.
Is there an easier way to prevent this error from appearing?
You need to combine v-show with dynamically applied validation rules. This is where you pass the rules as an object, with the first key:value being the rule name and a boolean for if required (which can be the same as the v-if boolean).
For VeeValidate 2 (old version in question)
<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />
See Sandbox Example for VeeValidate2
For VeeValidate 3
<validation-provider rules="required">
<input type="text" v-model="foo">
</validation-provider>
<validation-provider :rules="{required: showMe}">
<input type="text" v-model="bar" v-show="showMe">
</validation-provider>
See Sandbox Example for VeeValidate 3.
If you want to run a validation on hidden input, you just need to set field's display to none:
<input style="display: none">
This method works fine for me!

MVC4: HTML5 boolean attributes rendered with True/False value

I'm trying to render a radiobutton with some boolean attributes (required and disabled) using:
#Html.RadioButton("radio-name","false", new { id="test", required=Model.BooleanValue})
and
<input type="radio" name="radio-name" id="radio-name-no" value="false" class="radio" #if (!Model.BooleanValue) { <text>required</text> } disabled="#Model.BooleanValue" />
But the output is this:
<input id="test" name="radio-name" required="False" value="false" type="radio">
and
<input name="radio-name" id="radio-name-no" value="false" class="radio" disabled="True" type="radio">
MVC4 should render the boolean attributes as per HTML5 specs, so why it's outputting disabled="True" (or False) instead of disabled="disabled" or disabled (or nothing at all if the BooleanValue property is false)?
You can include conditionally rendered attributes like this:
<input
type="radio"
required="#(!Model.BooleanValue)"
disabled="#Model.BooleanValue" />
The solution was pretty strange. While doing some tests, I put an #if in the HTML input tag. This if was used to show the required attribute. After this #if, I put the disabled="#Model.BooleanValue" attribute.
It seems that this order disrupted the expected behaviour. Placing the disabled attribute before the #if solved the problem (later I have deleted the #if and converted it to required="#(!Model.BooleanValue)").

reference variable in ngFor not working

I want to convert following HTML code to Angular code using *ngFor
<div>Children: <input type="radio" id="1" name="children" [value]="1" [(ngModel)]="this.children"/>1
<input type="radio" id="2" name="children" [value]="2" [(ngModel)]="this.children"/>2
<input type="radio" id="3" name="children" [value]="3" [(ngModel)]="this.children"/>3
You have {{this.children}} children
</div>
Angular code
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id=option name="children" [value]=option [(ngModel)]="this.children"/>{{option}}
You have {{this.children}} children
</div>
selectOptions is defined in Component's class as follows:
selectOptions:Array<number>=[1,2,3]
I can see error for {{option}} that Angular: Identifier 'option' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
I also see error for id=option name="children" that tag start is not closed.
What am I doing wrong?
I used your code like this:
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id={{option}} name="children" [value]=option />{{option}}
You have {{this.children}} children
</div>
It worked with this result:
Generated this html:
It seems one issue is that option goes out of scope once input tag is closed. If I move *ngFor to div then I get the labels. But they are now displayed vertically, not horizontally. This code works but with vertical alignment <div *ngFor = "let option of selectOptions"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children">{{option}} </div>
For horizontal alignment, this worked. Instead of repeating div, I repeated label. label wraps the input so option is in scope of input - <div > <label *ngFor = "let option of this.selectOptions; let ind=index"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children"> {{option}} </label> </div>

MVC 4 can one use unique IDs instead of 0 based count when looping through a model's collection?

We have a vert complex model with about 3 or 4 nested collections deep.
A lot of the data we are pulling from partial calls which 0 bases the ID's when using Editor Templates, so the names and IDs are repeated in our view. I imagine we could change this using jQuery but we are using for each loops at them moment building our own IDs and names. Obviously this is going to break the model binder.
I've done some research and it seems that I can use a for loop and 0-base my IDs and form field names (How to show validation message in mvc4 razor). But having a client and server remember the last number used is probably unreliable. So my question is, do the names and IDs have to be 0 based or can they simply be unique? I would rather use the unique ID of the item instead of the iteration's index. For example, could I modify the following and add my own ID and Name in the Html element object?
At the very list, can I mimic the output that would be generated using editorFor and maintain the validation and binding?
#for (var i = 0; i < Model.UsersOfList.Count; i++)
{
<li>
#Html.TextBoxFor(m.UsersOfList[i].LoginName, new {#class="textbox_LoginInfoAndPermission"})
#Html.ValidationMessageFor(m => m.UsersOfList[i].LoginName)
#Html.TextBoxFor(m.UsersOfList[i].UserName, new {#class="textbox_LoginInfoAndPermission"})
#Html.ValidationMessageFor(m => m.UsersOfList[i].UserName)
</li>
}
I believe you are referring to non-sequential index binding, which allow an arbitrary ID to be used in place of a zero-based, sequential integer.
Example (from linked article):
<form method="post" action="/Home/Create">
<input type="hidden" name="products.Index" value="cold" />
<input type="text" name="products[cold].Name" value="Beer" />
<input type="text" name="products[cold].Price" value="7.32" />
<input type="hidden" name="products.Index" value="123" />
<input type="text" name="products[123].Name" value="Chips" />
<input type="text" name="products[123].Price" value="2.23" />
<input type="hidden" name="products.Index" value="caliente" />
<input type="text" name="products[caliente].Name" value="Salsa" />
<input type="text" name="products[caliente].Price" value="1.23" />
<input type="submit" />
</form>
This allows you to add/remove items at will without maintaining an index. It also allows you to use non-integer values in the request. It does require an extra hidden field for each item; this allows the model binder to "see" it and the model will be correctly instantiated from the data posted to the controller.

text fade on input field, where is this being configured

i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).