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
Related
I want to switch to to a new window on pressing a button, and the new window has dynamic URL, How do we handle this. Is there any workaround. I searched through many articles
Click the add button
cy.get('a[href*="javascript:xxxSearch();"]').click()
It opens a new window
I want to access(search/add the elements in new window and then switch back to previous main window
May be a good idea if you could share the full html of that page. As I understood from the question, may be grab the href and then get the attribute of href to a const and visit to that link as below. Just give a try and let me know if this is working for you.
it('Open a new window',function(){
cy.visit('some_url')
//test code continues....
cy.get('a[href="/some/link"]').then(($href)=>{
const hrefLink = $href.attr('href');
cy.visit(hrefLink);
// rest of you test to grab the search button
})
})
I am using Cypress to click a link on the Homepage which opens the respective page in the new window. I am not able to identify any element on this page. I am doing this to verify that the click opens the correct page.
I saw the link: Access a new window - cypress.io which didn't help much to answer the problem.
Please suggest if there is some way to test this.
I have tried few things like:
cy.window().contains('.div.trItem')
cy.window().its('.trValue).should('eq','SomeHeading')
cy.url().should('include', '/theLink1.html/')
Expected:
- Clicking link open the correct page in new window
- Identify URL in new window includes some text
- Certain text displays on the new window
First of all, you can't access to another tab or window with Cypress. Consider to separate your test cases. For example, in one test you could check that a element contains href attribute with expected url and target attribute with _blank.
Like this:
it('contains valid a element', () => {
cy.visit('https://example.cypress.io/')
cy.contains('Cypress.io').should('have.attr', 'href', 'https://www.cypress.io').should('have.attr', 'target', '_blank')
})
And in second test check that your other page contains expected text.
I am attempting to use navigateTo() within a modal in my NativeScript Vue application.
My modal components is wrapped in a <Frame>, which I understand is how to allow it to be a navigation controller. However, when I attempt to navigate to the sub-component of the modal, it actually opens behind the modal in the main frame.
You can see this behavior here: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3
Click the "Open Modal" button and then click the "Show subpage" button. Seemingly nothing happens, but if you then click the "Close" button, you'll see the sub page opened behind the modal.
In order to navigate to a frame that is used in a modal, you should utilize the second argument to the $navigateTo method. This can reference a frame by reference or id. The easiest way I found was to give the frame in the modal an id:
<Frame id="modal-frame">...</Frame>
Then you can navigate inside the modal as as example
this.$navigateTo(OtherComponent, {frame: 'modal-frame'});
Note, you do not put a # in front of the ID like a CSS selector. Only the id value.
See for code reference: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48
Another cause for this same issue is when the sub-component that the modal is navigating to isn't wrapped in a <Page> tag.
When you add a catch to your navigate code then it gives the following errors, depending on whether you use the ref or id.
this.$navigateTo(NewModal, {
frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));
"frame-ref" throws TypeError: Cannot read property 'id' of undefined
"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function
As shown in the following example, I would like to restrict the tab key behavior to just this frame with links.
http://jsfiddle.net/zFXNM/
tabindex ="1"
I do NOT want the tab to go the URL other items in the browser.
For example, the "Compose Mail" in Gmail does this already. I observed 3 usages of "tabindex=-1" within the JS.
In pure JavaScript, I have figured out a solution for this issue. The idea is whenever the page is loaded we determine the first and last links, then we prevent the tab default action and jump to the first link from the last tab.
if (activeElement.id == lastHrefID) {
e.preventDefault();
document.getElementById(firstHrefID).focus();
}
A working solution is available at : https://jsfiddle.net/srirammac/95sv63s7/
I am trying to retrieve, modify, and reinsert some text in a pop up dialog using watir web-driver. All was going swimmingly until I tried to find a way to click the "Save Book Info" button pictured here: http://i.stack.imgur.com/pGdln.png
However I am unable to find the button. To access the pop up box I gather all the links with the correct name into an array:
#browser.imgs.each do |img| #The links are imgs
if img.title.include?('Edit/Delete Book')
#books << img
end
end
From there I can access the links with #books[index].click. I am able to access and edit the text_fields with:
url = #browser.text_field(:name=>'url').value
... do stuff with url ..
#browser.text_field(:name=>'url').set url
But when I try and find the "Close" button I only get the buttons that are on the main page. After many headaches I managed to find the title of the window I want to work with using #browser.div(:class=>'dijitDialogTitleBar').title, which returns "Edit Book". Success! No. I still can't figure out how to access the buttons on that popup!
If anyone could help me with this I would be most grateful. This is my first time using Watir so it's probably a simple answer...
If more information is needed I'd be happy to supply it. Thanks in advance.
EDIT
Here is the html for the button:
<span id="dijit_form_Button_2_label"
class="dijitReset dijitInline dijitButtonText"
dojoattachpoint="containerNode">Save Book Info</span>
It looks like you have a span tag that is styled to be looked like a button. You need to access it is a span instead of a button.
Try:
#browser.span(:text => 'Save Book Info').click