Ability to prevent/stop loading 'Page load' in Cypress when clicked a hyperlink - hyperlink

In my Cypress test,
I need to test a link which downloads a .txt, .xlsx and a .zip file when clicked, but when I use "click()" to click the hyperlink, it starts a page load and expects a new action to happen as a result of clicking a link.
As an alternative to this I tried using the cy.downloadFile() to download the files directly through the link but the link I am using is dynamically generated hence I am unable to use that as well. Hence I want to store the newly generated link in the variable and then use it in cy.downloadFile() every time I run the test.
Are there any other ways to test a hyperlink or how to store the dynamically generated link every time the test is run?

Hi there i been through this problem before.
I think it is the same scenario where the cypress test runner just keep waiting page load event and not go to the next test command while file are successfully downloaded.
Add custom cy.window event to listen the click event and add timeout to "force" reload current page, you need to tweak the timeout value so it suitable for your test.
it.only('tes button download', ()=> {
// visit url
cy.visit("/spmb/list_nilaiseleksi");
cy.get('#wrap-button > .btn').click()
//download
cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
cy.get(':nth-child(9) > .col-md-12 > .btn').click()
})
})
More details and discussion available here on cypress github issue :
https://github.com/cypress-io/cypress/issues/14857

I found a way to store the link of the element I want to click. Since I am able to store the link, I am able to solve the requirement by using cy.downloadFile().
cy.get('#selector', {timeout: 15000}).then(($input) => {
cy.downloadFile($input.attr('href'),'cypress/downloads','filename.csv')
});

For me, the problem was resolved after I added the download attribute to the link, This is changing the element in the DOM, but it keeps the solution simple:
cy.get('[href="download?type=php"]')
.then((el) => {
el.attr('download', '');
})
.click();

Related

Does Electron support drag-and-dropping a file path into another application?

In C# WinForms, I could do this
var data = new DataObject(DataFormats.FileDrop, filePaths);
myControl.DoDragDrop(data, DragDropEffects.Copy);
to make another application, such as Notepad, open the file specified by filePaths. The code is similar in WPF or even in JavaFX. The file path can be any arbitrary file path that is accessible within the system, such as C:\Windows\win.ini or \\myFileServer\sharedDir\sharedFile.txt. I mean making Notepad OPEN the file, NOT displaying the file path text in its editing area. That is, I am d&d'ing a file path, not a string that contains the file path.
Can I do the same thing if I make a desktop application with Electron (only for desktops; don't care about web/mobile)? I have tested it with VS Code, which is said to be created with Electron, and when I dragged a file from its "Explorer" into Notepad, nothing happened. When I did it into Notepad++, it just displayed the file path string in its editing area, so I am guessing Electron doesn't support it, but I want to make it sure.
Yes, there even is a full example in the Electron documentation about this.
Short summary of the example code: when a specific DOM element is being dragged, the renderer sends an event to the main process. For the dragstart event to fire, the DOM element needs to have the attribute draggable="true". In this example, we pass the filename of the file to be dragged along in the message to the main process.
document.getElementById("foo").ondragstart = event => {
event.preventDefault();
ipcRenderer.send("my-drag-start", "test-file.txt");
}
The main process handles the IPC message from the renderer and starts the drag operation. Note that you need to specify an icon to be attached to the cursor during the drag operation, triggering an error message if left out.
ipcMain.on("my-drag-start", (event, filePath) => {
event.sender.startDrag({
file: path.join(__dirname, filePath),
icon: path.join(__dirname, "dnd.png"),
});
});

Cordova InAppBrowser PDF- iOS

My code is working but not exactly the way I want. I'm using the plugin cordova-plugin-inappbrowser. I have an anchor tag to click and opens up a pdf. The code is as follows:
$("#lnkTools").click(function(e){
//e.preventDefault();
url = 'someExternalLink.pdf';
var options = {location: 'yes', clearcache: 'no', toolbar:'no', closebuttoncaption: 'DONE?'};
$cordovaInAppBrowser.open(url, '_blank', options);
}
The problem I'm facing is that, the PDF doesn't open if I don't exit the app, I have to exit the app first and get back in for the PDF to open up. What am I missing? When I try to use _system same thing, before it opens up the browser, I still need to exit the app first.
EDIT:
When I try to change the $urlRouterProvider.otherwise('/app/main'); in my app.js to $urlRouterProvider.otherwise('/app/login'); it's working, well. Why is this like this? when I place a $state.go('app.main') in my login controller, it loops. Is there any way I can get through this?

Detect empty, new tab openings in Google Chrome

I just published a Google Chrome extension which loads background images into new, empty tabs. The plugin is found here in the Chrome Web Store.
For detecting new and empty tabs, I need to ask for "tab" permissions in the extension's manifest.json. This, however, gives the extension the permission to read the browser's history. Not all users will want this and we don't actually need it. Is there a way to detect empty tabs without this permission requirement? Currently our check looks like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if (changeInfo.status == "loading" && tab.url == 'chrome://newtab/')
{ /* load background into tab */ }
});
If you want to customize the new tab page you should add this to your manifest:
"chrome_url_overrides": {
"newtab": "newtab.html"
}
Then place the script you are currently injecting into new tab pages as a <script> tag in the newtab.html file. That won't cause that permission message.

Testing HTML5 File Upload with Capybara/Selenium Webdriver - Ruby

I have a simple modal that appears in which the user is shown the browse button to add the file to upload. Due to an unknown issue, be it the fact its an HTML5 file input therefore the browser adds its own functions to it, this has become a pain to test.
On my page I have:
<input type="file" id="photo_upload">
Capybara offers a solution out of the box which is:
attach_file <<upload_file_id>>, <<file_path>>
This behind the scenes executes a send_keys command to push the file_path into the path container for this input, however this simply did not work with my setup. I am running Firefox 25.0.1 on Windows 8. I tried both a relative path and a full path to this file, with forward and backslash combinations.
When I mean it did not work, I mean when my ajax script executes from clicking the button 'upload' next to it, it does not send any file object in the params.
I even tried to use capybara to send the file path directly:
find_field(<<upload_file_id>>).native.send_keys(<<file_path>>)
Next up, was to attempt to use selenium to push it in using:
element = driver.find_element(:id, <<upload_file_id>>)
element.send_keys <<file_path>>
Then I tried executing script to ensure the element was visible, and then setting it:
element = page.execute_script(
"document.getElementById('#{<<upload_file_id>>}').style.visibility = 'visible';
document.getElementById('#{<<upload_file_id>>}').style.height = '20px';
document.getElementById('#{<<upload_file_id>>}').style.width = '60px';
document.getElementById('#{<<upload_file_id>>}').style.opacity = 1; return
document.getElementById('#{<<upload_file_id>>}')")
find_field(field_locator).native.send_keys(<<file_path>>)
This didn't work either. Now I am completely stuck. All the help on here and google points to using the above, but it just simply does not work for my setup.
My options as far as I can see it are to use a windows automation script and jump out of capybara, run the script, and then continue, or to directly call the upload url either from capybara using a post or calling the js ajax that currently does it.
So I have solved it, and its not too ugly. I used the automation route via AutoIT. The bundle you download with AutoIT includes a script to exe converter and using the below script (I can not take credit for the script) I created an exe:
Local Const $dialogTitle = $CmdLine[2]
Local Const $timeout = 5
Local $windowFound = WinWait($dialogTitle, "", $timeout)
$windowFound = WinWait($dialogTitle, "", $timeout)
Local $windowHandle
If $windowFound Then
$windowHandle = WinGetHandle("[LAST]")
WinActivate($windowHandle)
ControlSetText($windowHandle, "", "[CLASS:Edit; INSTANCE:1]", $CmdLine[1])
ControlClick($windowHandle, "", "[CLASS:Button; TEXT:&Open]")
Else
MsgBox(0, "", "Could not find window.")
Exit 1
EndIf
In my capybara script, I merely run:
find_field(<<upload_file_id>>).click
system("<<full_path>>\\file_upload.exe \"#{<<file_path>>}\" \"File Upload\"")
and it works perfectly! In fact, I think I prefer the fact it exactly mimics what a user would be doing.

firefox addon installation issue

After worked on many small addon i want to put those add on on my server so that people can download it and use it so that i can get the feedback from the people ..but when i am downloading it from my server(it is a xpi file) getting following error..
Firefox could not install the file at
http://abhimanyu.homeunix.com/Work/abhiman_2k5#yahoo.com.xpi
because: Install script not found
-204
but when i m putting these files manually in the path it works fine..After fiddling many hours couldn't figure it out whats the problem ...please help me.
I assume that you are letting the users download your add-on through some install button.
Unfortunately, its not as simple as pointing the browser to the xpi file on the server's file system. Below, I have pasted the script that installs Omture when the user presses on the "Download Omture" button on the add-on's website which you could also find using firebug.
function installExt()
{
var url="omture_current.xpi";
InstallTrigger.install({
"Omture": { URL: url,
toString : function() { return this.URL; } } });
return false;
}

Resources