I am playing around with variables in hyperscript. The docs say there are three different types of variables; local, element & global. Local has no prefix, while element & global use : & $ respectively. I have had success with implementing global and local variables in the following examples:
local
<section>
<div _="on load set x to 'Bob' then put x into me">Bob</div>
</section>
global
<section>
</div>
<div _="on load set $x to 'frank'"></div>
</div>
<output _="on load put $x into me">frank</output>
</section>
But I have not had any luck with element scoped variables. I was under the impression it would provide all child elements access to the variable, but it returns null.
<section _="on load set :x to 'Jim'">
<div _="on load put :x into me">null</div>
</section>
I would appreciate it if someone can show me what I am doing wrong.
Related
How do I check the table checkbox?
I tried clicking.
ie.Document.getElementsByClassName("x-grid3-hd-checker").Checked = True
<div class="x-grid3-hd-inner x-grid3-hd-checker x-grid3-hd-checker-on" unselectable="on" style="">
<a class="x-grid3-hd-btn" href="#"></a>
<div class="x-grid3-hd-checker"> </div>
<img class="x-grid3-sort-icon" src="/javascript/extjs/resources/images/default/s.gif">
</div>
I can't see a checkbox in the HTML code. But you use getElementsByClassName() in a wrong way for your case. getElementsByClassName() generates a node collection. If you need a specific node, you must get it by it's index in the node collection. First element has index 0.
Please note that the div tag with the CSS class class="x-grid3-hd-inner x-grid3-hd-checker x-grid3-hd-checker-on " is also included in the Node Collection, because a part of the class identifier is identical to "x-grid3-hd-checker ". [Edit: I'm not realy sure if the part must maybe stand at the begin of the identifier]
If you want to check this:
<div class="x-grid3-hd-checker"> </div>
Your code needs the second index of the node collection:
ie.Document.getElementsByClassName("x-grid3-hd-checker")(1).Checked = True
But if there are more tags with the class name "x-grid3-hd-checker" the above line don't work. I can't say anymore until you don't post more HTML and VBA code. The best would be a link to the site.
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
I have written a python selenium script that selects a state value from a drop down. The HTML for the drop down element is copied below:
<div class="hQSHyh4QFG0Xh0d-6pxTF" tabindex="0" style="height: 238px; display: none;">
<div class="SD_7vnwWhO0KG80czzPb3 option-0 al-option">AL</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-1 ak-option">AK</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-2 as-option">AS</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-3 az-option">AZ</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-4 ar-option">AR</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-5 ca-option">CA</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-59 um-option">UM</div>
</div>
Problem: the automation script locates the same state value ("CA") using a hard-coded xpath statement (See code snippet from script below). Instead, I would like to select the state value using a stored variable called "state".
state_selection = self.driver.find_element_by_xpath("/html/body/div[2]/div/div[2]/div/div/div[2]/div[1]/form/div/div[2]/div[2]/div[3]/div[2]/div/div[3]/div[6]")
state_selection.click()
Additional Notes: I have tried using other methods to locate the state value (see below) but, so far, I have only been successful using the hard-coded xpath above.
I also tried to locate the drop down element using the Selenium Select Method but I got messages telling me that "Select only works on <select> elements, not on 'div' "
driver.findElement(by.xpath("//select[#SD_7vnwWhO0KG80czzPb3='']/option[#value='CA']")).click()
Try to select required option by its text content:
state = "CA"
state_selection = self.driver.find_element_by_xpath("//div[.='%s']" % state)
state_selection.click()
I have this below golang template code snippet where I take values from a map of type map[string]interface{} and check if that string is empty or not but my string empty check is failing as:
template: apps.html:62:29: executing "apps.html" at <eq $src "">: error calling eq: invalid type for comparison . I tried to print the empty value also and it is rendered as <nil> but my {{if eq $src "<nil>"}} check is also failing and even if I put nil then also it fails. Is there any better way to achieve this.
{{$src := (index . "source")}}
{{$tar := (index . "target")}}
{{if eq $src ""}}
<div></div>
{{else}}
<div style="display:none;">
<input id="username" name="source" value="{{ $src }}"/>
<input id="username" name="target" value="{{ $tar }}"/>
</div>
{{end}}
Here is what you're doing (always better to give an example play.golang.org link if possible):
https://play.golang.org/p/uisbAr_3Qy
A few problems with what you're doing: If you're using a map for context, you don't need to use index at all, so your variables are not required. If you want to check if a key exists, just check for a nil entry with if. If your map contains elements of type interface, you can't compare with a string, only use eq when you're sure you have an element but are not sure what it might be, and wrap it in an if test if unsure whether the key exists.
I think you want to do something like this:
{{if .source }}
<div style="display:none;">
<input id="username" name="source" value="{{ .source }}"/>
<input id="username" name="target" value="{{ .target }}"/>
</div>
{{else}}
<div>empty</div>
{{end}}
https://play.golang.org/p/D2DCjAklFE
See the docs for text/template as they have a lot more detail:
https://golang.org/pkg/text/template/#hdr-Actions
If you want to compare with null(nil) use: https://github.com/Masterminds/sprig/issues/53#issuecomment-483414063
{{ kindIs "invalid" $value }}
I'm faced with a span element for text input instead of an input box, and I'm struggling to use Watir (Ruby) to enter text. There's no set method, there is a text method that returns the text fine, but I don't seem to be able to set the text that way.
I've also tried using span.select and span.focus and then browser.send_keys but nothing is input in the field.
<div class="UFIAddCommentInput _1osb _5yk1">
<div class="_5yk2" tabindex="-2">
<div class="_5rp7">
<div class="_1p1t">
<div class="_1p1v">
Write a reply...
</div>
</div>
<div class="_5rpb">
<div aria-autocomplete="list" aria-expanded="false" aria-haspopup="false" aria-owns="js_3i" class="_5rpu" contenteditable="true" data-testid="ufi_reply_composer" role="combobox" spellcheck="true" title="Write a reply..." id="js_3j">
<div data-contents="true">
<div data-block="true" data-offset-key="8c176-0-0" class="_45m_ _2vxa">
<span data-offset-key="8c176-0-0">
<br data-text="true">
</br>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could I try next? Is there a way to stop front end designers using non-standard elements?
You can use javascript to do this. The difficulty for me was to handle the nested quotes.
Two pieces of knowledge I had to figure out first before being able to do this w/ regards to nested strings:
a.) regarding how javascript handles nested quotes: http://www.w3schools.com/js/js_strings.asp
b.) on how to deal with nested quotes in ruby: Escaping single and double qoutes from a string in ruby (the %Q operator lets you set whatever you want to begin and end a string)
css_selector = "span[data-offset-key='8c176-0-0']"
b.execute_script(%Q|query="#{css_selector}"|)
b.execute_script("document.querySelector(query).innerHTML='that was tricky'")
Looks like the ability to inject JavaScript using procedures such as this enables you to be able to do just about anything Watir can't do otherwise. Good question, this was a learning experience for me too