diff --git a/examples/upload-files/README.MD b/examples/upload-files/README.MD new file mode 100644 index 0000000..8bd2e92 --- /dev/null +++ b/examples/upload-files/README.MD @@ -0,0 +1,25 @@ +# Select Files To Upload + +**Test Code**: [index.js](index.js) + +**Tested Page**: [index.html](index.html) + +TestCafe cannot access the browser's `Choose File` dialog to emulate file selection. This example shows how to add files to a `type="file"` input without browser dialogs. + +The sample page includes a `
` that contains: + +* an `` with `type="file"` that stores the selected files +* an `` with `type="submit"` that sends the files to the server + +During the test the `t.setFilesToUpload` method specifies the file paths for the `` element. The test clicks the `` to initiate the file upload. Then the test receives a list of uploaded files from the server and checks it with the `t.expect.eql` Method. + +## TestCafe API Used in This Example + +1. Test Structure: + * [Fixture.page](https://devexpress.github.io/testcafe/documentation/reference/test-api/fixture/page.html) Method +2. Element Identification and Actions: + * [Selector](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/) Object + * [t.click](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/click.html) Method + * [t.setFilesToUpload](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/setfilestoupload.html) Method +3. Assertion and Evaluation: + * [t.expect.eql](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/eql.html) Method diff --git a/examples/upload-files/index.html b/examples/upload-files/index.html new file mode 100644 index 0000000..438e62d --- /dev/null +++ b/examples/upload-files/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + +
+ + diff --git a/examples/upload-files/index.js b/examples/upload-files/index.js new file mode 100644 index 0000000..e6dc26a --- /dev/null +++ b/examples/upload-files/index.js @@ -0,0 +1,18 @@ +import { Selector } from 'testcafe'; + +fixture `My fixture` + .page `http://localhost:3000/examples/upload-files/index.html`; + +test('Check uploaded files', async t => { + const uploadedFileElements = Selector('#uploaded-file-list').child('li'); + + await t + .setFilesToUpload('#upload-input', [ + './uploads/text-file-1.txt', + './uploads/text-file-2.txt' + ]) + .click('#upload-btn') + .expect(uploadedFileElements.count).eql(2) + .expect(uploadedFileElements.nth(0).textContent).eql('text-file-1.txt') + .expect(uploadedFileElements.nth(1).textContent).eql('text-file-2.txt'); +}); diff --git a/examples/upload-files/uploads/text-file-1.txt b/examples/upload-files/uploads/text-file-1.txt new file mode 100644 index 0000000..7867023 --- /dev/null +++ b/examples/upload-files/uploads/text-file-1.txt @@ -0,0 +1 @@ +Test content 1 diff --git a/examples/upload-files/uploads/text-file-2.txt b/examples/upload-files/uploads/text-file-2.txt new file mode 100644 index 0000000..7225602 --- /dev/null +++ b/examples/upload-files/uploads/text-file-2.txt @@ -0,0 +1 @@ +Test content 2 diff --git a/package.json b/package.json index 586a4a4..2a5b4ca 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "test": "npm run examples && npm run mock-camera-microphone-access" }, "devDependencies": { - "mockdate": "^2.0.5" + "mockdate": "^2.0.5", + "multiparty": "^4.2.2" } } diff --git a/server/index.js b/server/index.js index b01a7c7..0d92e36 100644 --- a/server/index.js +++ b/server/index.js @@ -1,8 +1,19 @@ -const http = require('http'); -const fs = require('fs'); +const http = require('http'); +const fs = require('fs'); +const path = require('path'); +const multiparty = require('multiparty'); const SERVER_PORT = 3000; +const CONTENT_TYPES = { + '.js': 'application/javascript', + '.css': 'text/css', + '.html': 'text/html', + '.png': 'image/png', + '.zip': 'application/zip', + '.pdf': 'application/pdf' +}; + http .createServer((req, res) => { console.log(req.url); @@ -13,7 +24,39 @@ http res.setHeader('content-disposition', 'attachment; filename=text-file.txt'); fileStream.pipe(res); } - else - res.end(); + + else if (req.url === '/upload') { + const form = new multiparty.Form(); + + form.parse(req, (err, fields, filesData) => { + res.setHeader('content-type', CONTENT_TYPES['.html']); + + const uploadedFilesHtml = filesData.files.reduce((html, file) => { + return html += `
  • ${file.originalFilename}
    • \n`; + }, ''); + + const resultHtml = ` + + Uploaded files + + + + `; + + res.end(resultHtml); + }); + } + else { + const repositoryRoot = path.resolve(__dirname, '..'); + const resourcePath = path.join(repositoryRoot, req.url); + const content = fs.existsSync(resourcePath) ? fs.readFileSync(resourcePath).toString() : ''; + const contentType = CONTENT_TYPES[path.extname(resourcePath)]; + + if (contentType) + res.setHeader('content-type', contentType); + + res.end(content); + } }) .listen(SERVER_PORT);