I was writing E2E test-case using protractor for angularjs application. My application has multiple file uploading as one of its features. So, to write E2E test-case for my application, I have to automate multiple file-uploading.
I am able to upload single file using protractor but my application requires more than 1 file for seamless working.
browser.get(localUrl);
var button = element(by.css('[ngf-select]'));
button.click();
var input = element(by.css('input[type="file"]'));
input.sendKeys([ absolutePath, absolutePath1, absolutePath2]);
Regards
Ajay
Have you tried
browser.get(localUrl);
var button = element(by.css('[ngf-select]'));
button.click();
var input = element(by.css('input[type="file"]'));
input.sendKeys( absolutePath + "\n" + absolutePath1 + "\n" + absolutePath2);
Your requirement seems to be like Data Driven approach. So, keep all input file paths in below function arrayOfData() and it block will iterate till all files are uploaded. You can follow the below code:
describe('Data driven test spec', function () {
function arrayOfData() {
return [
{
"absolutePath": "/PathToFile1",
},
{
"absolutePath": "/PathToFile2",
},
{
"absolutePath": "/PathToFile3",
},
]
}
beforeAll(function(){
browser.get(localUrl);
})
using(arrayofData, function (inputData) {
it('test case logic to be executed for each set of data', function () {
var button = element(by.css('[ngf-select]'));
var input = element(by.css('input[type="file"]'));
button.click();
input.sendKeys(inputData.absolutePath);
});
});
});
Related
I am using Angular js with ASP.NET MVC and file upload done using codepen method.
It is running fine because I want to store the binary array so I can convert later and set it back.
But the problem I am facing is to validate the selected thing is image or not!
I can't find the way how can I check the selected thing is image or not?
Anyone have any idea about this?
I have also used parsley js for validation but it is angular js here also how can I use parsley to validate the selected thing is image or not or manually?
angular.module('starter', [])
.controller('Ctrl', function($scope) {
$scope.data = {}; //init variable
$scope.click = function() { //default function, to be override if browser supports input type='file'
$scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
$scope.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
if(f.type === 'image/jpeg' || f.type === 'image/png') {
console.log('The file type is ' + f.type);
// do something here
} else {
console.log('The file type is ' + f.type);
// do some other thing here
}
r.onloadend = function(e) { //callback after files finish loading
$scope.data.b64 = e.target.result;
$scope.$apply(); console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"
//here you can send data over your server as desired
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
});
or you can dynamically set accept="image/*" attribute to your html element.
check here
I'm new with Protractor and jasmine framework to test an AngularJS Application.
I whould like to reuse some of my scenarios, like Login feature can call in all scenarios of my suite.
This is my login_test.js
module.exports = function(testName, testFn) {
const loginPage = pages.login;
const mainPage = pages.main;
var protractor;
describe('common Login suite', function() {
browser.ignoreSynchronization = true;
beforeEach(function() {
});
afterAll(function() {
browser.manage().deleteAllCookies();
});
it(testName, function() {
browser.get('http://localhost:9000/');
loginPage.typeUserName('bxxxxx');
loginPage.typePassword('xxxxxx');
loginPage.clickLogin();
});
});
}
And here I have the remote_terminal feature, here I need call Login feature to perfom login in my scenario.
var loginSuite = require('./login_test.js');
loginSuite('login Suite terminal feature', function(browser) {
describe('description', function() {
console.log('describe');
it('it', function() {
console.log('it');
});
});
});
But when this spec (remote_terminal) is called to run I got this message on my console
Started
Spec started
.
common Login suite
✓ login Suite terminal feature
As you can see the describe and IT in the remote_terminal spec aren't ran.
Demo:
http://pavelbogomolenko.github.io/dry-principles-with-protractor.html
You can use pageObjects to achieve reusable code accross your test,
Let us create a new js file for login page as login_page.js as below,
var login_page = function(){
this.performLogin = function(){
//add code for performing login operation.
}
}
module.exports = new login_page();
Now you can import the login_page.js in all 'specs' and can call the performLogin() method whenever required.
Look at the example spec.js below,
describe("Test pageobject code",function(){
var login_page = require("login_page.js");
beforeAll(function(){
login_page.performLogin();
})
it("simple test to perform after login action is performed",function()
//do whatever you want to test
})
})
I am building a mobile app using ionic. One of the usecase is to let the user browse a file and upload it to the backend server (which exposes a rest service).
On the UI, I am using the html file tag
<input type="file" ng-select="uploadFile($files)" multiple>
This opens a file browser to select a file. Then in the controller, I am doing the following
.controller('UploadDocCtrl', function ($scope, $cordovaFileTransfer) {
$scope.uploadFile = function(files) {
console.log("selected file "+files);
// hard coded file path "/android_asset/www/img/ionic.pdf" to be replaced with the user selected file
$cordovaFileTransfer.upload(restServiceEndpoint, "/android_asset/www/img/ionic.pdf", properties).then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function(err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
// constant progress updates
});
});
The problem is that I am not able to get a reference to the selected file. Can someone please help with the steps to achieve this. Thanks!
I'm evaluating using Casper.js to do functional/acceptance testing for my app. The biggest problem I've seen so far is that my app is an SPA that uses handlebars templates (which are compiled to JS) The pages of my app are nothing more than a shell with an empty div where the markup will be injected via JS.
I've messed around with Casper a little and tried using its waitFor functions. All I can seem to get from it are my main empty page before any of the markup is injected. I've tried waitForSelector but it just times out after 5 seconds. Should I try increasing the timeout? The page typically loads in a browser very quickly, so it seems like there may be another issue.
I'm using Yadda along with Casper for step definitions:
module.exports.init = function() {
var dictionary = new Dictionary()
.define('LOCALE', /(fr|es|ie)/)
.define('NUM', /(\d+)/);
var tiles;
function getTiles() {
return document.querySelectorAll('.m-product-tile');
}
function getFirstTile(collection) {
return Array.prototype.slice.call(collection)[0];
}
var library = English.library(dictionary)
.given('product tiles', function() {
casper.open('http://www.example.com/#/search?keywords=ipods&resultIndex=1&resultsPerPage=24');
casper.then(function() {
// casper.capture('test.png');
casper.echo(casper.getHTML());
casper.waitForSelector('.m-product-tile', function() {
tiles = getTiles();
});
});
})
.when('I tap a tile', function() {
casper.then(function() {
casper.echo(tiles); //nodelist
var tile = Array.prototype.slice.call(tiles)[0];
casper.echo(tile); //undefined!
var pid = tile.getAttribute('data-pid');
})
})
.then('I am taken to a product page', function() {
});
return library;
};
Any Angular, Backbone, Ember folks running into issues like this?
I am testing an angular application and I would like to feed my search tests with different parameters and run the test for all parameters.
In my case I have a search test:
require("./myconfig.js");
describe('change number of items displayed by page', function () {
var loginPage = require("./Pages/login-page.js");
var searchPage = require("./Pages/search-page.js");
var ptor;
ptor = protractor.getInstance();
it('should display 20 items per page', function () {
searchPage.home.click();
searchPage.searchTxt.sendKeys(Parameter);
searchPage.searchBtn.click();
var result = ptor.findElements(protractor.By.repeater('object in objects'));
result.then(function (arr) {
expect(arr.length).toEqual(20);
});
}, 50000);
});
is there a way using Jasmine and protractor to call parmaeter from an XML file? Tahnks for your help
Try xml2js xml parser in Node and use in your test.
> npm install xml2js