Test File Upload Functionality

const puppeteer = require('puppeteer');
const { expect } = require('chai');

(async () => {
    const caps = {
        'browser': 'chrome',  // You can choose `chrome`, `edge` or `firefox` in this capability
        'browser_version': 'latest',  // We support v83 and above. You can choose `latest`, `latest-beta`, `latest-1`, `latest-2` and so on, in this capability
        'os': 'os x',
        'os_version': 'big sur',
        'build': 'puppeteer-build-1',
        'name': 'My first Puppeteer test',  // The name of your test and build. See browserstack.com/docs/automate/puppeteer/organize tests for more details
        'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
        'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY'
      };
      const browser = await puppeteer.connect({
      browserWSEndpoint:
      `wss://cdp.browserstack.com/puppeteer?caps=${encodeURIComponent(JSON.stringify(caps))}`,  // The BrowserStack CDP endpoint gives you a `browser` instance based on the `caps` that you specified
      });
    
    const page = await browser.newPage();

    // set viewport and user agent (just in case for nice viewing)
    await page.setViewport({width: 1366, height: 768});
    await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');

    await page.goto(
        'https://freetestdata.com/other-files/csv/', 
        { waitUntil: 'networkidle2' }
    );
    const ele = await page.$x('//span[@class="elementor-button-text"]')
    await ele[0].click()
    await page.waitForTimeout(10000);


    // go to the target web
    await page.goto('https://easyupload.io/');

    // get the selector input type=file (for upload file)
    await page.waitForSelector('input[type=file]');
    await page.waitForTimeout(1000);

    // get the ElementHandle of the selector above
    const inputUploadHandle = await page.$('input[type=file]');

    // prepare file to upload, I'm using test_to_upload.jpg file on same directory as this script
    // Photo by Ave Calvar Martinez from Pexels https://www.pexels.com/photo/lighthouse-3361704/
    let fileToUpload = '/Users/test1/Downloads/Free_Test_Data_200KB_CSV-1.csv';

    // Sets the value of the file input to fileToUpload
    inputUploadHandle.uploadFile(fileToUpload);

    // doing click on button to trigger upload file
    await page.waitForSelector('#upload');
    await page.evaluate(() => document.getElementById('upload').click());

    // wait for selector that contains the uploaded file URL
    await page.waitForSelector('#upload-link');
    await page.waitForTimeout(5000);

    // get the download URL
    let downloadUrl = await page.evaluate(() => {
        return document.getElementById('upload-link').value;
    });

    // display the result on console
    console.log({'file': fileToUpload,
                 'download_url': downloadUrl});
    try {
        expect(fileToUpload).to.match(/Free_Test_Data/);
        // following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
        await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'passed',reason: 'File uploaded successfully'}})}`);
    } catch {
        await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'failed',reason: 'File upload failed'}})}`);
    }
    // close the browser
    await browser.close();
})();