How to automate the drag and drop feature in an application using cypress?
I am not able to pick a file using cypress. I have tried using cypress-file-upload
there are some solutions:
First option: I recommend using cypress-drag-drop plugin you can know more about this option in the following link https://github.com/4teamwork/cypress-drag-drop
Second option: You can use cypress-file-upload plugin you can know more about this option in the following link https://www.npmjs.com/package/cypress-file-upload in this case you will need to something similar to:
cy.get('your-element').attachFile('myfixture.json', { subjectType: 'drag-n-drop' });
or
cy.get('your-element').attachFile('image.jpg',
{
subjectType: 'drag-n-drop', events: ['dragenter', 'drop']
})
Third option: You can check this article in the following link where the author have created a new command from scratch: https://jayashanigunarathne.medium.com/uploading-drag-drop-images-in-cypress-943c9db9957e
Related
If I have a link in my website. Eg. go to Google and I want to make a test:
GIVEN link (html tag a)
WHEN click the link
THEN browser opens new tab and URL of this tab includes 'google.com'
I know that this does not work:
cy.get('a').click();
cy.url().should('include', 'google.com');
Since the a has a target attribute you can do this.
cy.get('a')
.should('be.visible')
.then(($a) => {
expect($a).to.have.attr('target','_blank')
// update attr to open in same tab
$a.attr('target', '_self')
})
.click()
cy.url().should('include', 'google.com')
Depending on your app and what you are wanting to test, using cy.request() and checking on 200 status code may suffice for an external url.
You can use removeAttr to remove target and then click the link and assert. Something like:
cy.get('a').invoke('removeAttr', 'target').click()
cy.url().should('include', 'google.com')
I use Cypress to automate logging in to a web application, protected by an iFrame.
In my Selenium I can use a command to switch to iFrame:
driver.switchTo().frame(driver.findElement(By.xpath(".//*#id='app']/iframe")));
After that I can access iFrame elements as well.
But with Cypress, I don't know the method to switch to frame?
Cypress doesn't give you an out of the box solution to work with iframes like Selenium or other tools. But thanks to the huge community, a lot of workarounds are available to work with iframes. One such way is:
1.Go to cypress/support/command.js and write:
Cypress.Commands.add('getIframe', (iframe) => {
return cy.get(iframe)
.its('0.contentDocument.body')
.should('be.visible')
.then(cy.wrap);
})
2.In the tests write:
cy.getIframe('selector')
If you want to learn more about iframes and cypress, you can read this well written blog post by Gleb Bahmutov.
I'm investigating adding custom functionality via my own plugins, and here's what I've done so far
Premise
Create a plugin which will disable the remove button for relevant items
Attempted so far
Registered a plugin and during DID_LOAD_ITEM tried the below
const removeItemButtons = el.querySelectorAll('.filepond--action-remove-item');
removeItemButtons.forEach(removeItemButton => {
removeItemButton.setAttribute("disabled", "disabled");
});
But the button is not disabled. The attribute does not appear on the remove button. Am I missing something in the lifecycle on how plugins interact with the DOM? The button does get returned by the querySelector all, is it modified after the plugin is called?
did the removeItemButtons have been rendered before your function? it seems like your selector did not get the items
I want to test a file download. It is made programmatically on click a button that uses this function:
export function downloadURI(uri, target) {
const link = document.createElement('a')
if (target) link.target = target
link.href = uri
link.click()
}
The problem is that when you do cy.click() on that button the new tab is opened and the tests fail. I am checking that the download is successful by asserting the loading modal is visible after clicking the button (while the file is being generated via an HTTP request) and is Not visible after the download was generated.
How can I prevent this tab from opening so that the tests do not fail?
This works for me:
cy.get('a').invoke('removeAttr', 'target').click()
From the official document it says that cypress does not support multiple tabs testing.
Also there is a recipe including 3 solutions about how to handle this.
Have a read and see if it can help.
Is there any way to access Angular2 specific component specific data in console, for debugging purpose?
Like Angular1 has capability to access its components value in console.
update 4.0.0
StackBlitz example
update RC.1
Plunker example In the browser console on the top-left (filter symbol) select plunkerPreviewTarget (or launch the demo app in its own window) then enter for example
Select a component in the DOM node and execute in the console
ng.probe($0);
or for IE - thanks to Kris Hollenbeck (see comments)
ng.probe(document.getElementById('myComponentId')).componentInstance
Alternative
Hint: enabling debug tools overrides ng.probe()
Enable debug tools like:
import {enableDebugTools} from '#angular/platform-browser';
bootstrap(App, []).then(appRef => enableDebugTools(appRef))
Use above Plunker example and in the console execute for example:
ng.profiler.appRef
ng.profiler.appRef._rootComponents[0].instance
ng.profiler.appRef._rootComponents[0].hostView.internalView
ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren
I haven't found a way yet to investigate the Bar directive.
A better debug experience is provided by Augury which builds on this API
https://augury.angular.io/
https://www.youtube.com/watch?v=b1YV9vJKXEA
original (beta)
Here is a summary how to do that https://github.com/angular/angular/blob/master/TOOLS_JS.md (dead link and I haven't found a replacement).
Enabling debug tools
By default the debug tools are disabled. You can enable debug tools as follows:
import {enableDebugTools} from 'angular2/platform/browser';
bootstrap(Application).then((appRef) => {
enableDebugTools(appRef);
});
Using debug tools
In the browser open the developer console (Ctrl + Shift + j in Chrome). The top level object is called ng and contains more specific tools inside it.
Example:
ng.profiler.timeChangeDetection();
See also
Angular 2: How enable debugging in angular2 from browser console
First select the element using chrome 'inspect element' and run below method in chrome 'developer console'.
ng.probe($0).componentInstance
You could also use a css selector as shown below.
ng.probe($$('.image-picker')[0]).componentInstance
If you do it often, to make it little easier, have a global shortcut created as below. Now select any DOM element inside the component using 'inspect element' and invoke 'e()' from console
window['e'] = () => eval('ng.probe($0).componentInstance');
Using global scope variable.(any browser)
In ngOnInit() of component file
ngOnInit() {
window['test'] = this;
}
Now we can access instance of that component including services(imported on that component).
If you want to prevent accessing test for let's say production, you can conditionally give access to test like:
constructor(private _configService: ConfigService) {
}
ngOnInit() {
if(_configService.prod) {
window['test'] = this;
}
}
Here _configService means the instance of service used by all components and services.
So variable would be set like:
export class ConfigService {
prod = false;
}
I'm surprised that no one has mentioned Augury here, it's a Chrome plugin that gives you convenient access to all the information in your components, and also makes it easier to see that information in the console directly:
https://augury.rangle.io/
Angular 9+:
Select component root element in developer tools (Inspector), then type in console:
ng.getComponent($0);