When i am passing on the below command .get('.mat-option-text') Cy is identifying even the options of the dropdowns which are not in focus. Due to this Cy is trying to click the options which are not even visible and tests are failing. Any help on this? I want to click the option which is currently in focus.
cy.contains('Test Options')
.click({force: true})
.get('.mat-option-text').and('be.visible')
.contains('NOT SURE')
.click({force: true})
I think that you are confusing the word focus with the element being viewable in the viewport.
If you want to select the focused option you can do it vía cy.focused(), more info
But I think that you are referring to being able to click on something that is not viewable in the dropdown. Here you can use scrollTo to navigate to some position of the dropdown if you know the position or the coordinates:
cy.contains('Test Options')
.click()
.scrollTo('bottom')
Or you can scroll into view given the element like this:
cy.contains('Test Options')
.click()
.get('.mat-option-text')
.contains('NOT SURE')
.scrollIntoView()
.click();
Hope that this helps
Related
I have a site with TouchableOpacity that uses react-navigation to navigate to another screen. Is it possible in some way to add href to this button so I could open the another screen in new tab using context menu "Open link in new tab"?
I know there is possibility to add accessibilityRole='link' href={''} to a component but what about a whole button of view.
This is according to: https://github.com/necolas/react-native-web/issues/162
Using Text component it is possible by:
<Text
accessibilityRole='link'
href={defineRightClick()}
target='_blank'
onPress={(e) => {
e.preventDefault();
navigateFunction();
}}>
Click to navigate, right click to open in new tab
</Text>
Ask if more information is needed for this question and I will edit it.
Every help is appreciated as I have tried to find solution but have not come across or found a way to handle this case.
Found an answer!
Even thought it is not documented in here: https://necolas.github.io/react-native-web/docs/accessibility/#accessibility-patterns
and using href in TouchableOpacity will show ts error No overload matches this call., it is possible to add to a TouchableOpacity props
accessibilityRole='link'
href={'desired link'}
target='_blank'
Then using e.preventDefault() in onPress event of TouchableOpacity will prevent link opening and do other things assigned to the function. At the same time the link is possible to be opened with right click > context menu > "Open link in new tab"
I will post this as answer so if anyone else comes across this they might find the solution
I'm trying to use Cypress to click a react-select element. However, I get very inconsistent results.
My code for clicking the element is as follows:
cy.get('div[class*=container]').contains('Brand').click()
Sometimes this works, sometimes it doesn't. Sometimes if I repeat this line twice (which is kind of hacky...), it works, but on other occasions it doesn't...
What would be the correct and fool-proof way to wait for this element to properly load and click it only then in Cypress?
I looked into this cypress repo and it suggested two way to do the click().
cy.contains('.product', 'First item')
.find('button.order')
.click()
.wait(1000)
cy.contains('.product', 'First item')
.find('button.order')
.click()
.click()
Because its a select element, what you would want to do is:
cy.get('div[class*=container]').select('Brand')
or
cy.get('div[class*=container]').contains('Brand').realClick()
Looking at examples of react-select, there are a lot of classes with container in them, so 'div[class*=container]' is not the best selector.
I understand class*=container is to circumvent the style hash which can change on compile.
Ideally, add a specific class to the source, as per the first example on the home page
<Select
className="basic-single"
...
then you have a link to the top-most element, which is clickable.
cy.visit('https://react-select.com/home')
cy.get('div.basic-single')
.should('contain', 'Ocean')
.click()
cy.contains('Green').click() // option selection
cy.get('div.select__control').eq(0)
.should('contain', 'Green')
I'm trying to make a simple app with Playground (https://play.nativescript.org/). I'm using "RadSideDrawer" as a side menu. I'm satisfied. BUT ... every time I use "RadSideDrawer" and I move from one page to another, inside the "ActionBar" a button appears whose function is to bring back to the left page (please have a look at this page https://www.attivitacollaterali.it/appdata/services/apps/RadSideDrawer.html). I don't need and want this button. How can I make it not appear? Thank you.
Or, if not, at least update "RadSideDrawer". I mean that if the button goes back, for example to the "Search" page from the "Home" page, it should highlight/select "Search" in the "RadSideDrawer" menu and not leave "Home". Thanks again.
I think you're looking for the "clearHistory" option while navigating. When navigating to another page, you must do this:
this.router.navigate([url], { clearHistory: true });
Just make sure you're injecting RouterExtensions in your constructor:
constructor(private router: RouterExtensions) {}
That should clear the navigation stack when navigating, thus removing the button to go back to the previous page.
EDIT: If you want to retain the navigation stack, I believe you can also edit your action bar like this:
<ActionBar>
<NavigationButton visibility="collapsed"/>
</ActionBar>
I'm having difficulty trapping a programmatically triggered click event on a hidden button control from a ASP.NET MVC 4 web app inside a VB6 thick client (which is using a web browser control). I'm able to trap the click event itself using the following:
Private WithEvents WebDoc As HTMLDocument
Private Function WebDoc_onclick() As Boolean
Select Case WebDoc.activeElement.iD
Case "A"
Do something
Case "C"
Do something else
End Select
WebDoc_onclick = True
End Function
And this works just fine if the control is visible. But if the control is invisible:
<div class="HideBtnDiv">
<input id="C" name="NoItems" type="button" class="BtnDiv" style="display:none"/>
</div>
and I try to trigger a programmatic click via one of the following:
$("#C").('click');
$("#C").trigger('click');
$("#C").triggerhandler("click");
$("#C").focus();
$("#C").trigger('click');
I'm getting an empty string for the "id" attribute and as a result I can't distinguish which button was clicked. This button serves no purpose other than to indicate to the VB6 app that a certain criteria has been met and that's the reason why I need it to be hidden. Does anyone have any idea why the id is getting stripped? Or is there any other way to communicate back to the client?
I've also tried filtering by element style using
Select Case WebDoc.activeElement.Style
Case "display:none"
Do something else
End Select
but it came back as "[Object]" so no luck there either. Please let me know if there is a way around this.
Thanks,
Lijin
You seem to have tried several ways of dynamically triggering the click event, but did you try the most obvious way:
$("#C").click();
???
But here is what I would do:
1- Make all of your buttons visible, by removing "display:none" from their style
2- Wrap the buttons you want to hide in a new DIV
3- Set "display:none" style in the newly created DIV
4- You can then trigger the .click() event of any button even if not visible by calling $(id).click();
Thanks, Ahmad. Actually I meant .click() not .('click'). Sorry about that.
Anyway, I tried your suggestion and made the button visible and set the style of the wrapping div to display:none but the id attribute was still coming through as an empty string.
However, I did figure out another way to get this to work. If I keep the wrapping div and button as visible and then focus and click when the condition is met and then do a hide(), my problem is resolved!
$("#C").focus();
$("#C").trigger('click');
$("#C").hide();
The button doesn't get displayed and VB6 still passes the id on the click event. The weird thing is it requires the focus() call to still be made. Without it, I'm back to square one. Not sure if this is a bug.
I have an ASP.NET DropDownList control that renders into a dropdown list (select HTML tag) on a page. For some reason, when I'm in Internet Explorer, it requires two clicks for me to open it up and see the options, which is just an extra click for the end-user. It works fine in Google Chrome, Mozilla Firefox and Safari--I only have to click once to see the options for a selection. Why would it not work correctly in IE? And more importantly, how can I fix it in IE?
Here is my code:
<asp:DropDownList id="DDLClientName" runat="server" EnableViewState="False" AutoPostBack="True" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)">
Had to remove the hard-coded onfocus event. IE handles the first click for the focus event, and the second to expand the dropdown. I guess this is a known quirk with IE along with the other 400+ quirks.
I am still trying to figure out a way to change styles of the dropdown on focus. Depending on what code you put into this callback anonymous function, you may still need to click the dropdown twice in IE. I've found that you can monkey with other controls, inside this function and it doesn't require two clicks. I'll keep this as the answer for now. I guess because of Microsoft we can't use the onfocus at all on dropdowns. I may try using an actual select tag rather than using Microsoft's ASP.NET DropDownList, and see if I can use the onfocus event then, without the extra click. I doubt it.
jQuery(this.Elements.DDLClientName).focus(function() {
.. put code here
});
I had this same problem and this is due to how IE 10 handles onFocus, it treats the first focus as a click. What I did to fix it was bind the mousedown event to the click event. Then, you can run whatever code you need in the click event.
// if IE 10
if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
$("#InvoiceTypeDropDown").bind('mousedown',function(event) {
$(this).trigger('click')
});
}
So my complete code looked like this:
if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
$("#InvoiceTypeDropDown").bind('mousedown',function(event) {
$(this).trigger('click')
});
$("#InvoiceTypeDropDown").click(function () {
if ($(this).val() == '') {
$(this).css("color", "black");
$(this).css("font-style", "normal");
}
});
}