I want to know if there is any way to click on a hidden element using Webdriverio
One of the components used in our project is material-ui select. I can see that it is hidden when rendered on the page, like below. When I click on it using browser.click('#fileName') in javascript, I am getting an error message as element not visible.
Just wanted to check if there is any way to click on this hidden element from Webdriverio. Our developers are currently looking into implementing native select if I couldn't find anyway to get it working.
Writing it here to see if anyone else faced this problem and has worked around it, if yes, can you please share with me about how you overcome this?
Thanks in advance.
Edit1:
Image of the ui
Related
so everytime I load the website for the first time, there is a selection box in the menu and I do not have an idea from where is coming from.
I am using react and react burger menu https://www.npmjs.com/package/react-burger-menu
I upload a picture to show you.
Here is just a sandbox with bad design but I manage to reproduce the error.
The error comes when I use the option isOpen={true}
Every time I reload the page, you can see there is a selection at the start.
https://codesandbox.io/s/lively-dawn-gqtqjv?file=/src/App.js
Thanks for your help and hope my question is not that weird or bad.
I tried with css selector to undo this but nothing works.
According to the document, you can disable the autoFocus by
<Menu disableAutoFocus />
Please refer to Focusing the first menu item: https://www.npmjs.com/package/react-burger-menu
Example code based on your codesandbox: https://codesandbox.io/s/sharp-herschel-15wrd2?file=/src/App.js
Yes I got your issue, basically focus selector outline property is active for 'a' tag you can solve that issue by adding following css snippet in style.css(I tested it & perfectly work on your provided problem)
I'll attach screenshots first for what I'm trying to replicate.
First, you have a form
Then, you enter some text
And when you press then 'enter' key, you end up with this
I have absolutely no idea where to start when trying to create a form that replicates this functionality. Would I have to use Javascript to add a listener for the 'enter' key and change the css?
I am unsure how to search for the functionality either, and would really appreciate if anybody could give some insight, and maybe a tutorial or template anywhere. I spent hours googling to no avail..
I wanted to have the same functionality a while back and wrote it from scratch... then to find it's included in a bootstrap/jQuery plugin. Read about the "tags" here
Bootstrap Tag functionality Examples
This should be exactly what you are looking for.
I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?
#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.
there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you
Im currently working with the contentbuilder.js script to prepare a simple page to allow content editing.
Whilst I love this particular script, I havent been able to find a way to keep the toolbar visible at all times. The readme file doesnt give out too much information, but im wondering if anyone has worked with this before and managed to keep the toolbar visible at all times, but when the text isnt in focus, make the buttons disabled.
thanks in advance
hey I used the following on my page to make it show up as long as the builder had focus
$("#<%=contentarea.ClientID%>").mousedown(function(event) {
jQuery("#rte-toolbar").stop(true, true).fadeIn(200);
});
What I want to achieve is, If there is feature image then show specific <div class="has-featured-image">.
What I have tried or thought ?
I thought of using jQuery to achieve that. Like if there is specific class of feature image is present there, then show <div class='has-featured-image'>, which logically works.
But the issue that I am facing is:
1> If admin removes the featured image, then how can I modify the same DIV with <div class="no-feature-image>"? because the jquery I am inserting is based on DOM ready.
Other thing that I have tried
Other thing I thought of to use wordpress condition of has_post_thumbnail, but the issue is, it only work if admin refresh the page or comes to that page 1st time.
Is it possible to achieve ?
If anybody can give me start then It would be great.
Thanks in advance.