Inside of a grid layout I was attempting to set two column sizes dynamically depending on a boolean flag like this <v-col v-if="this.displayMeeting" cols="4"> and below setting the second column like this <v-col :cols="[displayMeeting ? '8' : '12']">
When the page displays, I get this in the console
[Vue warn]: Invalid prop: type check failed for prop "cols". Expected Boolean, String, Number, got Array
but the page layout works. If the meeting window is present, I get two cols one class="col col-4" and the other class="col col-8". If I falsy set the boolean flag the one column goes away and the second column jumps from 8 to 12.
So it works, but with two warnings in console?
You are providing an array and its expecting Boolean, Number or String so replace it with String by removing the square bracket wrapping.
<v-col :cols="displayMeeting ? '8' : '12'">
<!--- here --^^-------------------------^^---->
Related
I would like to test some dash plotly UI functions with cypress but I have some problems with ids based on dash Pattern Matching, e.g.:
Trying to use the id, as found in the DOM, I get the following error:
I've tried the test with the following sytax:
cy.get('[id="{"index":0,"type":"dynamic-dropdown"}"]').should('exist')
cy.get('[id={"index":0,"type":"dynamic-dropdown"}]').should('exist')
EDIT:
I've also found this based on the browser developer mode, which will not throw a syntax error but the element can not be found:
cy.get('[id="{"index":0,"type":"dynamic-dropdown"}"]').should('exist')
If you have a look at the element
cy.get('.dash-dropdown')
.then($el => console.log('attributes', $el[0].attributes))
you see a NameNodeMap with three items
0. id
1. index":0,"type":"dynamic-dropdown"}"
2. class
so (at least in chrome) the browser has split the id because of the internal double quotes. The id value is {, the remainder becomes an attribute key with no value.
You can apply a filter based on this pattern
cy.get('.dash-dropdown')
.filter((index, el) => {
const id = el.getAttribute('id')
return id === '{' && el.hasAttribute('index":0,"type":"dynamic-dropdown"}"')
})
.should('have.length', 1)
.and('have.text', 'one') // passes
Tested with
<body>
<div id="{"index":0,"type":"dynamic-dropdown"}" class="dash-dropdown">one</div>
<div id="index-type-dynamic-dropdown" class="dash-dropdown">two</div>
<div id="dynamic-dropdown-type-index" class="dash-dropdown">three</div>
</body>
Single Selection
By changing the outer quotations marks from "single" to "double" (cy.get("")), using "single" quotations marks for the id definition ([id='']) and escaping the inner "double" quotations marks (\"index\") cypress can detect the correct element:
cy.get("[id='{\"index\":0,\"type\":\"dynamic-dropdown\"}']").should('exist')
Selector Approach
Another solution is based on cypress Selector and looks like this:
cy.get('[id*=index][id*=type][id*=dynamic-dropdown]')
It will match multiple elements, which include the words "index", "type" and "dynamic-dropdown" but without any order.
So, ids like the following would also match:
<div id="index-type-dynamic-dropdown"></div>
<div id="dynamic-dropdown-type-index"></div>
I need to retrieve a div without children with given text. I have this html
<h1>Rest Object</h1>
<div style="background-color: transparent;">
<div>Title: Rest object</div>
<div>ID: 2</div>
<div>Title: Rest object Copy</div>
<div>Full text: This is the full text. ID: 2</div>
<div>Value: 0.564</div>
<div>Timestamp: 2017-06-14 11:35:40</div>
</div>
I want to find <div>ID: 2</div>. How? I tried
xpath=(//div)
and it returns first div. I tried to use
xpath=(//div[not(div)])
and it returns
<div>Title: Rest object</div>.
UPDATE. Now I know I could you index.
xpath=(//div[not(div)][2])
<div>ID: 2</div>.
What if I don't know the index.
which returns
One way to get the needed div is to use starts-with() function:
//div[starts-with(.,'ID:')]
boolean starts-with(string, string) - Returns true if the first argument string starts with the second argument string; otherwise returns false
To restrict the search to div element which has no children you may use count(*) function:
//div[starts-with(.,'ID:')][count(*)=0]
I have a button
<button type="button" id="saveListing" class="button small save-button" data-bind="enable: saveEnabled, click: save"><i class="fa fa-save"></i> Save</button>
located in the tr of a table.
I wrote a function for testing the button status, simply using:
And(/^...the button "(.*?)" on "(.*?)" page is disabled$/) do |button_name, page|
button_id = ConfigHelper.get_button_info(button_name, page)['id']
button_class = ConfigHelper.get_button_info(button_name, page)['class']
if !button_id.nil?
find_button(button_id)[:disabled].should eq 'true'
elsif !button_class.nil?
find(button_class)[:disabled].should eq 'true'
else
button_text = ConfigHelper.get_button_info(button_name, page)['text']
find('button', text: button_text)[:disabled].should eq "true"
end
end
However, this block does not work for a button in a table row. I also tried add checking by button id, and it also did not work. How can I implement it without taking table id as a parameter? (As I don't want to write table id inside the feature)
When using id, the error is:
Capybara::ElementNotFound: Unable to find css ".saveListing"
or using text:
Ambiguous match, found 4 elements matching css "button" (Capybara::Ambiguous)
Thanks.
Capybaras find_button doesn't search css classes at all so unless you have overwritten find_button I'm not sure why you would be getting that error from using it with an id. find_button will search by the id, value, text content, or title attribute of the button, and also supports a disabled filter for searching. More stable (if the status of the button is changing due to JS) versions of those checks would be
find_button('saveListing', disabled: true).should be #Note: no # in front of the id here since its not a css selector
find_button('button text', disabled: true).should be
These would be more stable because they will utilize Capybaras waiting behavior to find the disabled button, whereas the way they were written previously would immediately find the button and error if they weren't yet disabled.
saveListing is the id of your button, not a class. In css selectors, dot is used for classes and hash sign is used for ids.
Therefore, you should either be using #saveListing or .save-button, but not .saveListing. This is why your first matching fails.
As to why the second one does - I guess there are 4 rows, each with one button and Capybara doesn't know which one you are referring to. If you want to check this condition for all of them, you could use all instead of find like this:
all('button', text: button_text).each do |button|
button[:disabled].should eq "true"
end
Is there an xpath way to select a given attribute value?
For example I have an html document and want to select only "?ms=669601" :
<input type="button" value="تفاصيل" onclick="xmlreqGET("?ms=669601","jm1x");">
In your simple example, you could simply select that portion of the onclick attribute in the only input:
substring(input/#onclick, 12, 10)
In more complicated documents, try selecting first by #value (or some other (possibly unique) criteria):
substring(//input[#value='تفاصيل']/#onclick, 12, 10)
Or by targeting the input that contains part of the desired substring:
substring(//input[contains(#onclick, 'xmlreqGET(')]/#onclick, 12, 10)
Selecting the input element itself if its onclick attribute contains the target string:
//input[contains(#onclick, '?ms=669601')]
Note: Your input is not valid XML, due to nested double-quotes.
I want to restrict entry of input onto a field of type number such that input cannot be outside range of min-max specified in the html.
input type = "number" min = "1" max = "5"
Is there a way of outputting the number field without the text box and i would rather not use
"input type = range"
as slider does not show value currently selected
Please help.
Thanks.
Based on what you said, I suggest using a simple input text field and check it's value validity on submission via JavaScript (as #Kush mentions above). You could also check it as the user types, or moves focus away from that field.
<form>
Only 1 to 100 <input type="text" name="number" pattern="\d{1,2}(?!\d)|100" title="one to hundreed only">
<input type="submit">
</form>