How can upload file by using xpath in cypress?
Am getting as mentioned below error...
const xpath = require('cypress-xpath')
describe('File upload Demo', () => {
Cypress.Commands.add('uploadFile', { prevSubject: 'element' }, (subject, fileName) => {
console.log('subject', subject)
return cy.fixture(fileName, 'base64')
.then(Cypress.Blob.base64StringToBlob)
.then(blob => {
console.log('blob', blob)
const el = subject[0]
if (el != null) {
const testFile = new File([blob], fileName)
const dataTransfer = new DataTransfer()
dataTransfer.items.add(testFile)
el.files = dataTransfer.files
}
return subject
})
}
)
it('upload file test', () => {
cy.visit('https://tus.io/demo.html')
cy.xpath('//input[#type="file"]').upload('401k_deferral.xlsx')
cy.get('[class="button primary"]').should('have.class', 'button primary')
})
})
TypeError: cy.xpath(...).upload is not a function
The custom command you have added is called uploadFile but you are trying to call upload.
Try this:
cy.xpath('//input[#type="file"]').uploadFile('401k_deferral.xlsx')
Related
I want to make a alpine plugin can be click for select file and return file had select to a variable.
#html
<button x-select="photo">
<span>Upload</span>
</button>
#script
Alpine.data('UpdateProfile', () => ({
photo: null,
}));
#alpine directive
Alpine.directive(
"select",
(el, { value, expression }, { effect, evaluateLater }) => {
el.addEventListener("click", (e) => {
e.preventDefault();
const input = document.createElement("input");
input.type = "file";
input.accept = "*";
input.addEventListener("change", (e) => {
const file = e.target.files;
});
input.click();
});
}
);
How I can set e.target.files to photo alpine variable.
First, you need to create a JS expression, that set the value of the user provided data name to the uploaded file name, then evaluate this expression within the Alpine.js context. For example, if the filename is picture.jpg, then ${expression} = '${file[0].name}' expression becomes photo = 'picture.jpg', so Alpine.js sets photo to the filename.
document.addEventListener('alpine:init', () => {
Alpine.directive(
"select",
(el, { value, expression }, { evaluate }) => {
el.addEventListener("click", (e) => {
e.preventDefault()
const input = document.createElement("input")
input.type = "file"
input.accept = "*"
input.addEventListener("change", (e) => {
const file = e.target.files
evaluate(`${expression} = '${file[0].name}'`)
})
input.click()
})
}
)
})
I have been trying to get the base64 of a File of Nativescript, so far I have tried the next:
const documents: Folder = <Folder>knownFolders.documents();
const folder: Folder = <Folder>documents.getFolder("Download");
const file: File = <File>folder.getFile("Vista general Aguas.pdf");
const toBase64 = (fle: File) => new Promise((resolve, reject) => {
const reader = new FileReader();
const newFile = fle.readSync(err => console.log(err));
// I know that I have to convert the binary to base64, but I'm getting this [B#9b1d878 in newFile
reader.readAsDataURL(newFile);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
toBase64(file).then(result => console.log('64', result));
Any help is appreciated!
I have created function using native implementation. This function return base64 string.
public getBase64String = (path) => {
const sourceFile: fs.File = fs.File.fromPath(path);
const data = sourceFile.readSync();
if (isIOS) {
return data.base64EncodedStringWithOptions(0);
} else {
return android.util.Base64.encodeToString(
data,
android.util.Base64.NO_WRAP
);
}
};
I am using current versions of Laravel & Inertia.js. I am also using IntertiaProgress and looking to use it during a file upload using axios
The files all upload OK but the console shows:
app.js:33316 Uncaught (in promise) TypeError: Cannot read property 'defaultPrevented' of undefined
Tracing this back it points to here in the source of InertiaProgress:
start(event) {
Promise.resolve().then(() => {
if (event.defaultPrevented) {
return
}
this.inProgress++
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
Nprogress.set(0)
Nprogress.start()
}, this.delay)
})
},
If I console.log(event) I get undefined
My upload() method:
upload(files) {
let url = this.$route('library.upload');
this.$root.showLoading = true;
const uploadConfig = {
timeout: 10000,
onUploadProgress: function(progressEvent) {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
InertiaProgress.progress(percentCompleted)
}
}
InertiaProgress.start()
axios.post(url, {
files,
},
uploadConfig
).then(res => {
let files = res.data.files
if (files.length) {
this.filesList = cloneDeep(files)
}
this.newFiles = []
InertiaProgress.finish()
this.$root.showLoading = false
}).catch(err => {
console.log(err)
InertiaProgress.finish()
this.$root.showLoading = false
})
},
Any help is appreciated
You could use NProgress directly.
Instead of:
InertiaProgress.progress(percentCompleted)
Like this:
NProgress.progress(percentCompleted)
See also: https://inertiajs.com/progress-indicators
I am new to Cypress. How to read data from excel files using Cypress? Searched in google but could not find useful answers.
In cypress you can create cypress task to read xlsx file with SheetJS library.
Usage
cypress\integration\read-xlsx.spec.js
context('Xlsx file', () => {
it('Read excel file', () => {
cy.task('readXlsx', { file: 'my-excel.xlsx', sheet: "Sheet1" }).then((rows) => {
expect(rows.length).to.equal(543)
// expect(rows[0]["column name"]).to.equal(11060)
})
})
})
Need to install xlsx
$ npm install xlsx
Create read excel fuction
cypress\plugins\read-xlsx.js
const fs = require('fs');
const XLSX = require('xlsx');
const read = ({file, sheet}) => {
const buf = fs.readFileSync(file);
const workbook = XLSX.read(buf, { type: 'buffer' });
const rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
return rows
}
module.exports = {
read,
}
Use function as Cypress task (plugin)
cypress\plugins\index.js
const readXlsx = require('./read-xlsx')
module.exports = (on, config) => {
on('task', {
'readXlsx': readXlsx.read
})
}
Here is an instruction how to use excel as source for cypress tests https://medium.com/#you54f/dynamically-generate-data-in-cypress-from-csv-xlsx-7805961eff55
First you need to conver your xlsx file to json with Xlsx
import { writeFileSync } from "fs";
import * as XLSX from "xlsx";
try {
const workBook = XLSX.readFile("./testData/testData.xlsx");
const jsonData = XLSX.utils.sheet_to_json(workBook.Sheets.testData);
writeFileSync(
"./cypress/fixtures/testData.json",
JSON.stringify(jsonData, null, 4),
"utf-8"
);
} catch (e) {
throw Error(e);
}
Then import json file and loop over each row and use the data in the way you want. In this example it tries to log in to a system.
import { login } from "../support/pageObjects/login.page";
const testData = require("../fixtures/testData.json");
describe("Dynamically Generated Tests", () => {
testData.forEach((testDataRow: any) => {
const data = {
username: testDataRow.username,
password: testDataRow.password
};
context(`Generating a test for ${data.username}`, () => {
it("should fail to login for the specified details", () => {
login.visit();
login.username.type(data.username);
login.password.type(`${data.password}{enter}`);
login.errorMsg.contains("Your username is invalid!");
login.logOutButton.should("not.exist");
});
});
});
});
For me the first answer pretty much worked. But i had to make a small fix.
Use function as Cypress task (plugin)
cypress/plugins/index.js
const readXlsx = require('./read-xlsx')
module.exports = (on, config) => {
on('task', {
'readXlsx': readXlsx.read
})
}
when i used this code i got the below error in cypress.
CypressError
cy.task('log') failed with the following error:
The task 'log' was not handled in the plugins file. The following tasks are registered: readXlsx
and the below fix worked
const readXlsx = require('./read-xlsx')
module.exports = (on, config) => {
on('task', {
'readXlsx': readXlsx.read,
log (message) {
console.log(message)
return null
}
})
}
My Scenario
I'm using Google Drive API to create a file and to get a list of files.
My problem
1. No matter what value I put in my access_token the API keeps working
2. If I change the order of events and I call createDriveFile before I call listDriveFiles I get this error:
Error: Invalid Credentials
at Gaxios._request (/Users/tamirklein/superquery/bd/lambda/node_modules/googleapis-common/node_modules/google-auth-library/node_modules/gaxios/src/gaxios.ts:109:15)
at
at process._tickDomainCallback (internal/process/next_tick.js:228:7)
My code
if (!global._babelPolyfill) {
var a = require("babel-polyfill")
}
import {google} from 'googleapis'
describe('Run query with API', async () => {
it('check Drive APIs', async () => {
process.env.x_region = 'us-east-1';
let result = await test('start')
})
async function test(p1) {
let auth = getBasicAuthObj();
auth.setCredentials({
access_token: "anyValueWork",
refresh_token: "Replace With a valid refresh Token"
});
let fileList = await listDriveFiles(auth);
let newFile = await createDriveFile(auth);
}
async function listDriveFiles(auth) {
return new Promise((resolved) => {
const {google} = require('googleapis');
const drive = google.drive({version: 'v3', auth});
drive.files.list({
pageSize: 10,
fields: 'nextPageToken, files(id, name)',
q: 'trashed=false'
}, (err, res) => {
if (err) {
console.log('The API returned an error: ' + err);
resolved([err, null]);
} else {
const files = res.data.files;
if (files.length) {
console.log(`We fetched ${files.length} Files`);
// files.map((file) => {
// console.log(`${file.name} (${file.id})`);
// });
} else {
console.log('No files found.');
}
resolved([err, res]);
}
});
});
}
async function createDriveFile(auth) {
return new Promise(async (resolved) => {
//const fs = require('fs');
const {google} = require('googleapis');
const drive = google.drive({version: 'v3', auth});
let data = {
value: 'value'
};
let fileName = 'fileName.txt';
let fileMetadata = {
'name': fileName
};
// create buffer
let stream = require('stream');
let bufferStream = new stream.PassThrough();
bufferStream.end(Buffer.from(JSON.stringify(data)));
let media = {
mimeType: 'application/json',
body: bufferStream // fs.createReadStream("test.txt") //bufferStream //
};
drive.files.create({
resource: fileMetadata,
media: media,
fields: 'id'
}, function (err, file) {
if (err) {
// Handle error
console.error("Error: savePasswordInDrive" + err);
} else {
console.log('File Id: ', file.data.id);
}
resolved([err, file]);
});
})
}
async function _wait(milliseconds) {
return new Promise(resolved => {
setTimeout(() => {
resolved()
}, milliseconds)
})
}
/**
* Create oAuth object
* #returns {OAuth2Client}
*/
function getBasicAuthObj() {
let clientId = 'Replace With a valid clientId';
let clientSecret = 'Replace With a valid clientSecret';
let redirectUrl = 'URL';
return new google.auth.OAuth2(
clientId,
clientSecret,
redirectUrl
)
}
})
Any ideas on how to resolve this?