-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: update variables and file system docs.
- Loading branch information
Showing
7 changed files
with
203 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,118 @@ | ||
| --- | ||
| title: Using the file system | ||
| title: File uploads, downloads and the file system | ||
| weight: 20 | ||
| menu: | ||
| resources: | ||
| parent: "Browser checks" | ||
| aliases: | ||
| - /docs/browser-checks/file-system/ | ||
| cli: true | ||
| --- | ||
|
|
||
| Checkly creates a sandboxed directory for each check run. During the run you can use this directory to save or upload artifacts. This directory is destroyed after a check is finished. | ||
| You might want to use (binary) files in your browser checks. For example, you might want to upload a file to an upload | ||
| form in your webapp. Or, you might want to validate some aspect of a file that is available for download on your | ||
| app. | ||
|
|
||
| Due to this sandbox, certain Node.js variables are adapted to our platform and have values we set for them: | ||
| * `__dirname` will have the value of `/` | ||
| * `__filename` will have the value of `/script.js` | ||
| ## Testing uploads with the browser's File API | ||
|
|
||
| The values these variables correspond to might change in the future. Therefore, we recommend using `__dirname`, like `path.join(__dirname, 'example.png')` or relative paths, like `./example.png` or just `example.png`, while using the file system-related operation. You can find an example code snippet below: | ||
| To test any upload features with Playwright's `.setInputFiles()` method, you need to provide a file object. Currently, | ||
| Checkly does have a dedicated storage layer where you could upload that file, so you need to host it yourself at a (publicly) | ||
| accessible location like an AWS S3 bucket, Dropbox or any other file hosting service. | ||
|
|
||
| In the example below, we do not need to interact with the file system. We can just: | ||
|
|
||
| {{< tabs "Basic example" >}} | ||
| 1. Fetch a file from a public URL using the `request` object. | ||
| 2. Pass the resulting `Buffer` into the `.setInputFiles()` method. | ||
| 3. Wait for the upload to finish. | ||
|
|
||
| {{< tabs "Basic upload test example" >}} | ||
| {{< tab "Typescript" >}} | ||
| ```ts | ||
| import { test, expect } from '@playwright/test' | ||
|
|
||
| test('upload a file', async ({ page, request }) => { | ||
| // fetch the file to upload | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| const fileBuffer = await request.get(fileUrl) | ||
|
|
||
| // upload the file | ||
| await page.goto('https://filebin.net/') | ||
| await page.getByLabel('Select files to upload').setInputFiles({ | ||
| name: 'file.pdf', | ||
| mimeType: 'application/pdf', | ||
| buffer: await fileBuffer.body() | ||
| }) | ||
|
|
||
| // validate the upload was successful | ||
| await expect(page.getByRole('link', { name: 'Download file' })).toBeVisible() | ||
| await page.screenshot({ path: 'filebin.png' }) | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< tab "Javascript" >}} | ||
| ```js | ||
| const { test, expect } = require('@playwright/test') | ||
|
|
||
| test('upload a file', async ({ page, request }) => { | ||
| // fetch the file to upload | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| const fileBuffer = await request.get(fileUrl) | ||
|
|
||
| // upload the file | ||
| await page.goto('https://filebin.net/') | ||
| await page.getByLabel('Select files to upload').setInputFiles({ | ||
| name: 'file.pdf', | ||
| mimeType: 'application/pdf', | ||
| buffer: await fileBuffer.body() | ||
| }) | ||
|
|
||
| // validate the upload was successful | ||
| await expect(page.getByRole('link', { name: 'Download file' })).toBeVisible() | ||
| await page.screenshot({ path: 'filebin.png' }) | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< /tabs >}} | ||
|
|
||
| Notice we don't need to interact with the file system, we can just pass buffers around. | ||
|
|
||
| ## Testing uploads using HTTP POST requests | ||
|
|
||
| You can also "upload" files using a simple HTTP POST request with a (binary) body using Playwright's built-in `request` object. | ||
| You would use this when you want to test a file upload feature that is not using the browser's File API, but just an HTTP/REST endpoint | ||
| that accepts a file upload. | ||
|
|
||
| {{< tabs "Basic HTTP upload example" >}} | ||
| {{< tab "Typescript" >}} | ||
| ```ts | ||
| import path from 'path' | ||
| import fs from 'fs' | ||
| import { test } from '@playwright/test' | ||
|
|
||
| test('save file in directory', async ({ page }) => { | ||
| const image = await page.goto('https://picsum.photos/200/300') | ||
| const imagePath = path.join(__dirname, 'example.jpg') | ||
| const buffer = await image.body() | ||
| fs.writeFileSync(imagePath, buffer) | ||
| const readFileFromDisk = fs.readFileSync(imagePath) | ||
| import { test, expect } from '@playwright/test' | ||
|
|
||
| test('Upload a file using a POST request', async ({ request }) => { | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| const fileBuffer = await request.get(fileUrl) | ||
| const response = await request.post('https://filebin.net/pp9on3zvwv7zq6lm/dummy.pdf', { | ||
| data: await fileBuffer.body(), | ||
| }) | ||
| await expect(response).toBeOK() | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< tab "Javascript" >}} | ||
| ```js | ||
| const path = require('path') | ||
| const fs = require('fs') | ||
| const { test } = require('@playwright/test') | ||
|
|
||
| test('save file in directory', async ({ page }) => { | ||
| const image = await page.goto('https://picsum.photos/200/300') | ||
| const imagePath = path.join(__dirname, 'example.jpg') | ||
| const buffer = await image.body() | ||
| fs.writeFileSync(imagePath, buffer) | ||
| const readFileFromDisk = fs.readFileSync(imagePath) | ||
| const { test, expect } = require('@playwright/test') | ||
|
|
||
| test('Upload a file using a POST request', async ({ request }) => { | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| const fileBuffer = await request.get(fileUrl) | ||
| const response = await request.post('https://filebin.net/pp9on3zvwv7zq6lm/dummy.pdf', { | ||
| data: await fileBuffer.body(), | ||
| }) | ||
| await expect(response).toBeOK() | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< /tabs >}} | ||
|
|
||
| ## Using the file system | ||
|
|
||
| {{< markdownpartial "/_shared/using-the-file-system.md" >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
site/content/docs/multistep-checks/upload-downloads-filesystem.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| title: File uploads, downloads and the file system | ||
| weight: 20 | ||
| menu: | ||
| resources: | ||
| parent: "Multistep API checks" | ||
| identifier: "multistep-checks-uploads" | ||
| cli: true | ||
| --- | ||
|
|
||
| You might want to use (binary) files in your Multistep checks. For example, you might want to upload a file to a | ||
| an API endpoint using a binary body. Or, you might want to validate some aspect of a file that is available for download on your | ||
| app. | ||
|
|
||
| ## Testing uploads using HTTP POST requests | ||
|
|
||
| To test any binary uploads, you need to provide a file object. Currently, Checkly does have a dedicated storage layer | ||
| where you could upload that file, so you need to host it yourself at a (publicly) accessible location like an AWS S3 bucket, | ||
| Dropbox or any other file hosting service. | ||
|
|
||
| Having done that, you can "upload" files using a simple HTTP POST request with a (binary) body using Playwright's built-in `request` object. | ||
|
|
||
| {{< tabs "Basic HTTP upload example" >}} | ||
| {{< tab "Typescript" >}} | ||
| ```ts | ||
| import { test, expect } from '@playwright/test' | ||
|
|
||
| test('Upload a file using a POST request', async ({ request }) => { | ||
| const fileBuffer = await test.step('Fetch file', async () => { | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| return request.get(fileUrl) | ||
| }) | ||
|
|
||
| await test.step('Upload file', async () => { | ||
| const response = await request.post('https://filebin.net/pp9on3zvwv7zq6lm/dummy.pdf', { | ||
| data: await fileBuffer.body(), | ||
| }) | ||
| await expect(response).toBeOK() | ||
| }) | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< tab "Javascript" >}} | ||
| ```js | ||
| const { test, expect } = require('@playwright/test') | ||
|
|
||
| test('Upload a file using a POST request', async ({ request }) => { | ||
| const fileBuffer = await test.step('Fetch file', async () => { | ||
| const fileUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' | ||
| return request.get(fileUrl) | ||
| }) | ||
|
|
||
| await test.step('Upload file', async () => { | ||
| const response = await request.post('https://filebin.net/pp9on3zvwv7zq6lm/dummy.pdf', { | ||
| data: await fileBuffer.body(), | ||
| }) | ||
| await expect(response).toBeOK() | ||
| }) | ||
| }) | ||
| ``` | ||
| {{< /tab >}} | ||
| {{< /tabs >}} | ||
|
|
||
| ## Using the file system | ||
|
|
||
| {{< markdownpartial "/_shared/using-the-file-system.md" >}} |