DEV Community

Cover image for Tutorial: Zip Images and Upload Them to Google Drive On Windows With AskUI
Johannes Dienst for AskUI

Posted on • Edited on • Originally published at askui.com

Tutorial: Zip Images and Upload Them to Google Drive On Windows With AskUI

This tutorial will show you how to zip files on your filesystem and then upload them to Google Drive on Windows OS. The goal is to show you a lot of the AskUI SDK methods in action.

Using visual selectors and automation on OS level often feels confusing at first.

This tutorial will give you many of the tools you need to automate your own workflows.

Prerequisites

  • You are working from Windows Operating System
  • You have AskUI installed: Windows, Linux, macOS
  • Create a folder askui on your desktop
  • Copy some images to it
  • Change the view mode of the folder to miniature so the images show a little preview
  • You have to be logged in into your Google Account
  • Link to a Google Drive Folder
  • Desktop icon with the name Google Chrome that opens Google Chrome

Test

After running the npx askui init command as described in the setup you will have a file test/my-first-askui-test-suite.test.ts. In this file, add a new test inside the body of the callback passed to the describe function:

describe(/* a string identifying the test suite */, () => {
    ... (other tests)

    it('Should upload screenshots folder on google drive', async () => {

    });
});
Enter fullscreen mode Exit fullscreen mode

Open the Folder askui

Next, we want to click on the folder where our images are stored and open it.

await aui.click().text().withText('askui').exec();
await aui.mouseDoubleLeftClick().exec();
Enter fullscreen mode Exit fullscreen mode

Select All Images and Zip Them

Select the first image and then use the shortcut Ctrl + A to select all images in the folder.

// The text to insert here should be something in the opened explorer window.
// Usually there is 'This PC' or 'Quick Access' there.
// Watch the video if you are not sure how the selector works.
await aui.click().image().nearestTo().text().withText('This PC').exec();
await aui.pressTwoKeys('control', 'A').exec();

await aui.mouseRightClick().exec();
await aui.click().text().withText('Compress to Zip file').exec();
await aui.type('askui screenshots').exec();
await aui.pressKey('enter').exec();
Enter fullscreen mode Exit fullscreen mode

Open Google Chrome

Now we minimize the window and find the shortcut with the word Google on the desktop.
The mouse pointer moves to it and double-clicks to open it.

await aui.click().icon().withText('minus').nearestTo().icon().withText('stop').exec();
await aui.click().text().withText('Google').exec();
await aui.mouseDoubleLeftClick().exec();
Enter fullscreen mode Exit fullscreen mode

Navigate to Google Drive

After opening Chrome the Google search page appears if you do not use profiles. The Google Drive-Link will be typed into the search field and thus opened when Enter-Key is pressed.

Do not forget to replace <Your Google drive link to the folder!

// Omit this step if you do not use profiles in chrome
await aui.click().text().withText('<Your profile>').nearestTo().text().withText('work').exec();

await aui.typeIn('<Your Google drive link to the folder').textfield().contains().text().withText('Search Google or type a URL').exec();
await aui.pressKey('enter').exec();
Enter fullscreen mode Exit fullscreen mode

Find Zip-File and Upload

Within the Google Drive folder, a mouse-right-click opens the context menu. There we click on File upload, navigate to our zip-file location and upload it.

await aui.mouseRightClick().exec();
await aui.click().text().withText('File upload').exec();
await aui.click().text().withText('Desktop').exec();
await aui.click().text().withText('askui').exec();
await aui.pressKey('enter').exec();
await aui.click().text().withText('askui screenshots').exec();
await aui.click().text().withText('Open').exec();
Enter fullscreen mode Exit fullscreen mode

Complete Code

describe(/* a string identifying the test suite */, () => {

    it('Should upload screenshots folder on google drive', async () => {
        await aui.click().text().withText('askui').exec();
        await aui.mouseDoubleLeftClick().exec();

        // The text to insert here should be something in the opened explorer window.
        // Usually there is 'This PC' or 'Quick Access' there.
        // Watch the video if you are not sure how the selector works.
        await aui.click().image().nearestTo().text().withText('This PC').exec();
        await aui.pressTwoKeys('control', 'A').exec();

        await aui.mouseRightClick().exec();
        await aui.click().text().withText('Compress to Zip file').exec();
        await aui.type('askui screenshots').exec();
        await aui.pressKey('enter').exec();

        await aui.click().icon().withText('minus').nearestTo().icon().withText('stop').exec();
        await aui.click().text().withText('Google').exec();
        await aui.mouseDoubleLeftClick().exec();

        // Omit this step if you do not use profiles in chrome
        await aui.click().text().withText('<Your profile>').nearestTo().text().withText('work').exec();
        await aui.typeIn('<Your Google drive link to the folder').textfield().contains().text().withText('Search Google or type a URL').exec();
        await aui.pressKey('enter').exec();

        await aui.mouseRightClick().exec();
        await aui.click().text().withText('File upload').exec();
        await aui.click().text().withText('Desktop').exec();
        await aui.click().text().withText('askui').exec();
        await aui.pressKey('enter').exec();
        await aui.click().text().withText('askui screenshots').exec();
        await aui.click().text().withText('Open').exec();
    });
});
Enter fullscreen mode Exit fullscreen mode

To run this automation use the npx jest test/my-first-askui-test-suite.test.ts --config ./test/jest.config.ts command.

Video

If you would like to watch a video of this tutorial. Here you go:

Get Support

If you have a recurring or persisting issue, don’t hesitate to ask the Discord community for help!

Top comments (0)