Im coding integration tests in a project with cypress. This is the flow in my projet:
You click at a buy button of a projeto;
When you click, open a new tab in checkout product
Only this, click at a button and open a new tab with the checkout screen. But as we know, cypress dont have suport for multiple tabs, so how can i handle it? What is the way to open this new url in the same tab?
Important to highlight that this button is not wrapped by any a tag, its just a button that when I click has a handleClick that open a new tab and do other stuff. Because of this, none of these https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js solutions work for me.
I already tried this:
cy.stub(win, "open")
.callsFake((url, target) => {
//#ts-ignore
return win.open.wrappedMethod.call(win, url, "_self");
//#ts-ignore
})
.as("open");
});
but no success.
Related
I am new to nextjs and I am building my first website. My links are rendered with the following:
const menuList = menu.map(function(menuItem: any){
return <Link href={`${menuItem.slug}`} key={menuItem.slug} as={`${menuItem.slug}`}>{menuItem.title}</Link>;
});
I have an index.tsx and [slug].tsx
When I click on a link it doesn't reload the entire page but the blue menu and image flashe white. I was expecting just the 'I made it to about us' content to change and the image and menu would not appear to change. Am I missing something or is this expected? If I hit the back button I get the results I expect. I read to use 'as' on Link but that doesn't seem to help. Any suggestions?
I have this website https://www.storytel.com/sg/en/where I am trying to click on the button (refer to the image) in the Subscription Component which resides in the Shadowroot. I have tried with the following codes but it didn't work. It will be great if someone can help. Thanks in advance.
test('Click inside shadowDOM', async t => {
const shadowBtn = Selector(() => document.querySelector('storytel-subscription').shadowRoot.querySelectorAll('*[data-testid="subscription-card-0-button"]'));
await t
.click(shadowBtn);
});
There seems to be a bug with processing elements in shadow dom. I suggest you create an issue in the TestCafe GitHub repository and describe your scenario there: https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md
I am going to use the simplest example to explain what I mean.
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
When the page loads for the first time the client side console logs 'page is fully loaded'. But when I click on a NuxtLink or RouterLink, I don't get a repeated log entry for the new page load.
If I use a standard link, then the console logs 'page is fully loaded' on page I visit, as it should. But it doesn't have the nice speedy page load as NuxtLink or RouterLink accomplishes.
In Rails, it has a similar feature called Turbolinks, but you can use .on('page:load',... to grab each page load.
Does anyone know how to fire the window-load per page load?
The <nuxt-link> component is similar to the <router-link> component.
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page. This means that onload will only be triggered when the app is first loaded.
If you need to refresh and load the page every time you link to a new route, you can do this:
window.location.href = 'your link'
By linking to the page in this way, you can find from the network panel in the browser console that every time you load a page of type text/html from the server.
I'm using the
<Drawer>
tag and it works great, but I don't want the default screen layout with the default "hamburger" menu icon at the top-left of the screen.
I've spent hours trying to get my own button to open the drawer.
I've done my research homework:
The RNRF API for Drawer doesn't list open/close methods:
Was happy to find two EXACT issues "How to open Drawer When use a custom icon in Scene" #1101 and "How to customize drawer button" #1078 on GitHub but none of the solutions work--so close but yet so far!
In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}
but get this error:
Here is my main code:
I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa