Getting started with Microsoft Playwright, Automate Twitter!

What is Microsoft Playwright

Microsoft Playwright is a node.js web automation tool from former members of the popular puppeeter tool team, which recently released v1. Playwright is quite similar to Puppeteer but the main difference is that it offers cross-browser functionality rather than only being focused on chromium only browsers. The syntax is very similar and to puppeteer so it is very easy to port tests over if need be.

Setting up Microsoft Playwright

First you need to install node.js

Then run:

mkdir playwright-tutorial && cd playwright-tutorial 
npm init -y

This will create a new node project for you.

Then we will install playwright:

npm i playwright

This will then install chromium,firefox,webkit binaries for you.

Lets automate twitter

Usually tutorials have you do something boring like go to google assert the title.

Lets do something cool and use playwright to automate a tweet!

So using your favorite code editor create a new file in playwright-tutorial project, I named mine tweet.js

Lets import chromium from playwright

 const { chromium } = require('playwright');

Now launch the browser and create a new page

 (async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
})();

Navigate to twitter

  await page.goto('https://twitter.com/login');

Ok now we need to get the user/password inputs and fill them in

First we inspect the input element in dev tools:

So there is no clear unique identifiable id, or class as they look auto generated, lets try the type attribute and fill that in.

await page.fill('input[type="text"]', '<yourusernamehere');

And the same for password:

await page.fill('input[type="password"]', '<yourpasswordhere');

Ok time to click the login button:

page.click('div[data-testid='LoginForm_Login_Button']);

Notice the data-testid attribute, this is usually added in by javascript developers to specifically allow automation tools to navigate through applications, because react usually auto generates id’s, however these are usually scrubbed before an app goes to production.

So now your tweet.js file should look similar to:

const { chromium } = require('playwright');

(async () => {
   const browser = await chromium.launch();
   const page = await browser.newPage();
   await page.goto('https://twitter.com/login');
   await page.fill('input[type="text"]', '<yourusernamehere');
   await page.fill('input[type="password"]', '<yourpasswordhere');
   page.click('div[data-testid="LoginForm_Login_Button"]');
  }
)();

Ok, we are all set to login.

Remember to add your username , password into the fields above.

To run the script type into the terminal:

node tweet.js

Ok.. what nothing happened??

Well yes it did! By default it runs headlessly which you can’t see. To watch it run edit this line:

const browser = await chromium.launch({headless: false});

Run again and the browser should stop at the login screen:

nice ! 😎

Time to tweet!

Following similar above, lets fill in the whats happening, and click the tweet button.

So fill in the tweet..

   await page.fill('.public-DraftStyleDefault-ltr', 'This is a test tweet using Microsoft Playwright from @mrmmcgee tutorial');

and then click the tweet button, luckily we have a data-testid here.

Also lets close the browser after the test:

    page.click('div[data-testid="tweetButtonInline"]')
    await browser.close();

Should be good let’s run it:

 node tweet.js

and… drumroll.. 🥁

Pretty Cool huh?

Hopefully I have showed you how to get start with Microsoft Playwright, As wel can see it’s pretty easy to setup and it automatically handles waits with out having to hard code them.

This tutorial stops here but there is potential here to send automated tweets on a schedule without having to sign up for the twitter api 😁

Let me know on twitter if It helped.

There finished code is below:

(async () => {
    const { chromium } = require('playwright');

    const browser = await chromium.launch({headless: false});
    const page = await browser.newPage();
    await page.goto('https://twitter.com/login');
    await page.fill('input[type="text"]', '<yourusername');
    await page.fill('input[type="password"]', '<yourpassword>');
    page.click('div[data-testid="LoginForm_Login_Button"]');
    await page.fill('.public-DraftStyleDefault-ltr', 
    'This is a test tweet using Microsoft Playwright from @mrmmcgee tutorial');
    page.click('div[data-testid="tweetButtonInline"]')
    await browser.close();
})();