I have a static site with a couple of pages with vue.js.
The problem is when I open the source of a page "view-source:", I can see unrendered directives. I don't remember I had it on other sites. Am I missing something?
Name: ((contacts.name))
...
<colorpicker :color="contacts.color" v-model="contacts.color"></colorpicker>
...
<.. directive=`${something}`...>
edit, It won't help but here's another example.
I use (( delimiter insted of {{
This is how I see the page when viewing it through view-source:https://....:
<div class="control is-expanded">
<div class="select is-fullwidth">
<select v-model="k.s">
<option v-for="so in m.so" :value="so">(( so ))</option>
</select>
</div>
</div>
<colorpicker :color="k.c" v-model="k.c"></colorpicker>
Here's a screenshot of another part of the page:
Related
I would like to push a custom URL but keep the parameters of the original request. Consider the following example
<script
src="https://unpkg.com/htmx.org#1.7.0"
integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo"
crossorigin="anonymous">
</script>
<select id="select-number" name="number" hx-get="/debug" hx-push-url="/debug2" hx-target="#target">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="target">
</div>
Let's say I serve this at http://127.0.0.1:7000/debug. If I select 2 in the select field this will trigger a request to /debug?number=2 as expected. However, the URL pushed to the browser is http://127.0.0.1:7000/debug2, not including the parameters.
I want the following pushed to the history: http://127.0.0.1:7000/debug2?number=2
This has also been discussed in htmx issue #653. From my understanding what I'm doing should work, but maybe I'm doing something wrong?
Take the following code which is essentially going to render a form stepper and for the purposes of simplifying my example I have included just one step:
<form-wizard :formdata="this.form_data">
<form-tab stepindex="1" title="Title of Tab" :selected="true">
<div class="col-md-11 col-lg-10">
<div class="form-group">
<label for="OptionType" class="sr-only">Option Type</label>
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="option in form_data.fees" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
</div>
</div>
</form-tab>
</form-wizard>
For reasons I cannot understand the values are bound to the select options as expected and without error however the option text throws an error in the browser console that I cannot seem to overcome.
Property or method "option" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
It's like for some reason it is looking out to the wider scope for the option rather than the option in the v-for loop.
I'd appreciate any advice on how to correct this but also any help to try and understand why this is even the case.
If any additional information is required to help answer please let me know.
maybe the problem is v-bind:key on v-for
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="(option, i) in form_data.fees" v-bind:key="i" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
I'm trying to run some Selenium tests in Java but some fields are being blocked by another one and aren't clickable. The problem is, that other field doesn't actually exist in the page source.
The error is: Element <select id="pets" class="sumo form-control SumoUnder" name="pets"> is not clickable at point (1025.833351135254,677.4000244140625) because another element <span> obscures it
There is no element that doesn't have other tags (id, class, etc.) with it. So what is this mysterious field?
Interestingly, if I try to access some other fields first, I get different obscuring fields, which ALSO don't exist on the page. Such as:
<p class="CaptionCont SelectBox">
Watching the test interactively doesn't help; there's nothing visible that's blocking the elements when the error's thrown.
Where are these phantom fields coming from, and how do I stop them from blocking my fields?
EDIT: I have found that these fields are being added by SumoSelect. They don't show up when you view the source of the page, but they're there if you save the page and open it locally.
<div class="col form-group">
<label for="pets">Pets</label>
<div class="SumoSelect sumo_pets" tabindex="0" role="button" aria-expanded="false">
<select id="pets" name="pets" class="sumo form-control SumoUnder" tabindex="-1">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="CaptionCont SelectBox" title="Select">
<span class="placeholder">Select</span>
<label><i></i></label>
</p>
<div class="optWrapper">
<ul class="options">
<li class="opt"><label>Select</label></li>
<li class="opt"><label>1</label></li>
<li class="opt"><label>2</label></li>
<li class="opt"><label>3</label></li>
</ul>
</div>
</div>
</div>
if not clickable, may be selectable.
Select pets = new Select(driver.findElement(By.id("pets")));
pets.selectByIndex(1);
When you are using a JS library to enhance the Select - you need to see the final DOM created by the JS library. In the case of SumoSelect - the CSS for the select box itself is:
<p class="CaptionCont SelectBox" title=" Volvo">
<span> Volvo</span>
<label><i></i></label>
</p>
See the span there? If you want to click the dropdown - you need to click that span.
Try to click using JavaScript Executor.
Reference Link:- http://learn-automation.com/click-in-selenium-webdriver-using-java-script/
I have a small doubt over here on selecting one of the value from the drop down using selenium . When i generated a code using selenium-IDE it gave me a set of codes for selecting from the drop-down .
Code is as follows-->
driver.findElement(By.cssSelector("input.search")).click();
driver.findElement(By.xpath("//table[#id='project-add-table']/tbody/tr[4]/td[3]/div/div[2]/div[3]")).click();
new Select(driver.findElement(By.cssSelector("select"))).selectByVisibleText("Test");
So can anybody tell what is the use of that second line of code ?After clicking to the dropdown why cant we directly select the required element?
HTML -->
<td class="environmentTd" required="">
<div class="ui fluid search dropdown env selection">
<select>
<option value="SB">Sandbox</option>
<option value="DEV">Development</option>
<option value="QA">Test</option>
<option value="PROD">Production</option>
<option value="PP">Pre Production</option>
<option value="UAT">UAT</option>
<option value="DR">DR</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text">Sandbox</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item active selected" data-value="SB">Sandbox</div>
<div class="item" data-value="DEV">Development</div>
<div class="item" data-value="QA">Test</div>
<div class="item" data-value="PROD">Production</div>
<div class="item" data-value="PP">Pre Production</div>
<div class="item" data-value="UAT">UAT</div>
<div class="item" data-value="DR">DR</div>
</div>
</div>
</td>
If your select tag is visible in DOM without you clicking the dropdown, just use the third line
Select select = new Select(driver.findElement(By.cssSelector("select")));
select.selectByValue("QA");
Otherwise, click on the dropdown which will probably generate the DIV with class
class="menu transition hidden"
and then you can use the select line.
U don't really need to click on dropdown. U need to find dropdown as WebElement, convert it to SelectElement and use it's class method to select option.
I assume, that in provided code you click on dropdown, then click on opened fields with options. But I think it's a lot of unnecessary actions. Unless you have any scripts, triggered by that clicks, which must be tested.
From your description it sounds like the SELECT element isn't visible until the 2nd click happens. It's also possible that the 2nd click creates the SELECT element via Javascript. You could investigate this by using the Chrome devtools and search for the SELECT element before the 2nd click happens. See if it exists or maybe exists but is not visible. Then click on the 2nd element and see how the HTML changes. Without access to the site, that's about as good an explanation as we can provide. It's not something I would worry about. It's just the way the site is designed.
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.