AutomateTogether
AutomateTogether
  • 9
  • 58 507
Automate TOTP 2-Factor Authentication (2FA) with Playwright
A short tutorial to help you understand what goes into automating a TOTP-based 2FA flow using Playwright and the OTPAuth library.
Goal:
Automate a 2FA login using Playwright and OTPAuth.
Note:
There are multiple libraries out there for TOTP generation. Pick the one you like.
Timestamps:
00:00 Introduction
00:33 TOTP for 2FA
01:22 Approaching 2FA automation
02:23 Extracting the TOTP secret
03:48 Recording the script
05:32 Generating the TOTP token
08:19 2FA automation challenges
10:11 Resources
Environment:
- MacBook Pro (13-inch, M1, 2020)
- macOS Monterey (12.2.1)
- Node v14.15.4
- Playwright 1.24.2
Resources:
- QR decoder: zxing.org/w/decode.jspx
- OTPAuth library: hectorm.github.io/otpauth
- The excellent official Playwright docs: playwright.dev
- IETF RFC6238: www.rfc-editor.org/rfc/rfc6238.html
- ragog.link for more articles and notes
Contact:
- @rag0g on Twitter
- linkedin.com/in/ragog
-@Giovanni Rago on the official Playwright Slack channel
Disclaimer
These videos are meant to teach interested people, professionals and amateurs, how to use browser automation tools such as Playwright to write scripts for testing, synthetic monitoring, scraping and similar use cases. They center around popular websites to demonstrate real world scenarios for automation. Their aim is never to disrupt a website’s availability or violate its terms of service.
Before you attempt automation on a publicly available website, make sure you read the terms and conditions around automation (and specifically scraping) and abide by them.
Переглядів: 15 233

Відео

Automating a web chat with Playwright
Переглядів 1,4 тис.2 роки тому
Goal: Get a first look at how Playwright enables control of multiple tabs and contexts through a practical example. Notes: - This is not a full-blown tutorial on multiple tabs; one such tutorial will come in the near future. - This is not one of my Automate Togethers, i.e. I am not live coding and I had a look at automating this scenario beforehand. Environment: - MacBook Pro (13-inch, M1, 2020...
Testing/monitoring reddit.com with Playwright! [Automate Together #2, Part 1]
Переглядів 1,1 тис.2 роки тому
A hands-on live automation session where you can see me try and write an automation script with Playwright running against reddit.com, with the goal of showing one way this can be done from beginning to end in a real-world environment and, in turn, helping Playwright users be more successful at automating monitoring and testing scenarios on their own target websites. Resources: - The excellent ...
Playwright Test or Playwright Library? In 2 minutes
Переглядів 3,4 тис.2 роки тому
Goal: Learn the main differences between Playwright Test and Playwright Library Questions answered: - What are they? - What are the differences and similarities - What to use each of them for Environment: - MacBook Pro (13-inch, M1, 2020) - macOS Monterey (12.2.1) - Node v14.15.4 - Playwright 1.20 Resources: - The excellent official Playwright docs: playwright.dev - ragog.link for more articles...
Playwright request interception
Переглядів 13 тис.2 роки тому
Goals: Learn the basics of network manipulation with Playwright 1. Inspecting requests and responses 2. Intercepting and blocking requests 3. Modifying responses for stubbing Environment: - MacBook Pro (13-inch, M1, 2020) - macOS Monterey (12.1) - Node v14.15.4 - Playwright 1.18 Resources: - The excellent official Playwright docs: playwright.dev/docs/network - My guide on request interception o...
Record Playwright scripts using Codegen
Переглядів 3,8 тис.2 роки тому
Goals: Learn the basics of using Playwright Codegen, including best practices to ship robust scripts to production. If you are a beginner, I’d recommend watching two previous videos on this channel: 1. Code-first Playwright intro tutorial on macOS: ua-cam.com/video/i-46PlHmP2g/v-deo.html 2. Playwright selectors in-depth for beginners: ua-cam.com/video/Vp6ltXMw4kE/v-deo.html Official Codegen doc...
Writing a Playwright script testing/monitoring amazon.com! [Automate Together #1]
Переглядів 5 тис.2 роки тому
A hands-on live automation session where you can see me try and write an automation script with Playwright running against amazon.com, with the goal of showing one way this can be done from beginning to end in a real-world environment. Resources: The excellent official Playwright docs: playwright.dev/docs/in My guide on selectors on Checkly’s open-source guides: www.checklyhq.com/learn/headless...
Playwright selectors in-depth for beginners (with best practices and examples)
Переглядів 14 тис.2 роки тому
An in-depth look at selectors with Playwright for beginners. Consists of a general intro, best practices and practical examples. Goals: - Learn how to find & test selectors including a. CSS selectors b. XPath selectors c. Playwright text selectors - Learn selector best practices to a. Distinguish between solid and brittle selectors b. Optimise existing selectors when possible Resources shown: -...
Code-first Playwright intro tutorial on macOS (install to first script)
Переглядів 1,9 тис.3 роки тому
A Playwright intro tutorial that aims at getting you started writing Playwright code as quickly as possible. Finished script: pastebin.com/ayi5SH2k Goals: - Learn to set up Playwright on macOS - Learn to write a basic script a.Opening and closing the browser b.Clicking, typing and waiting c. Inspecting the page d. Headless and headful launch Resources shown: - nodejs.org - danube-webstore.herok...

КОМЕНТАРІ

  • @n4h92
    @n4h92 22 дні тому

    can we do that with .json files?

  • @ompanhale-b8r
    @ompanhale-b8r 2 місяці тому

    how this can help us to automate otp which is coming on the gamil and also otp is coming after sending the invite from one portal and need to sigin in on to the next portal after putting password then to handle such senario can u please help me in that plz

  • @gaorutweandrewmosala1288
    @gaorutweandrewmosala1288 3 місяці тому

    This video was very helpful and good content overall, No BS!!

  • @davidev9107
    @davidev9107 4 місяці тому

    Java alternative ?

  • @pistolprasadyt8748
    @pistolprasadyt8748 4 місяці тому

    Awesomr bro.. From India

  • @oyerindedaniel7977
    @oyerindedaniel7977 6 місяців тому

    nice video

  • @ripperx444
    @ripperx444 7 місяців тому

    But you can't do this for web sockets can you? Sure you can see that a page opened a socket connection but you can't actually intercept and change the reply

  • @SlavaTravelsSometimes
    @SlavaTravelsSometimes 7 місяців тому

    Thanks, man! Very educational! I was always wondering how others overcome it!

  • @williamflores7323
    @williamflores7323 8 місяців тому

    How can I do this in python?

  • @soumyabhat5308
    @soumyabhat5308 9 місяців тому

    How to automate when you receive OTP via text msg in phone?.

    • @Vineetkumar-hu2cs
      @Vineetkumar-hu2cs 8 місяців тому

      I am too interested to know same asked by @soumyabhat5308

    • @sabbyLuthra
      @sabbyLuthra Місяць тому

      By using mock server.

  • @marijanarukavina9499
    @marijanarukavina9499 11 місяців тому

    How can I make it work with Upwork, they have Authenticator app for OTP but I don’t know how to get secret since there is no QR code

  • @blecomp
    @blecomp 11 місяців тому

    Great video thanks for sharing. Did you made some video about mocking? Thanks again

  • @wangarewakungu9753
    @wangarewakungu9753 Рік тому

    That was helpful. Kindly do the same with Python.

  • @pedritoap1
    @pedritoap1 Рік тому

    Amazing, I did it and did work. Do you know if it is possible to do it with python with some library?

    • @wangarewakungu9753
      @wangarewakungu9753 Рік тому

      I would like to know as well. Did you get a solution?

    • @diddi62
      @diddi62 Рік тому

      me too @@wangarewakungu9753

  • @CTimmerman
    @CTimmerman Рік тому

    And of course the two conflict. I just want to test WCAG as well as functionality, so i'll drop the test wrapper.

  • @mohitomish
    @mohitomish Рік тому

    Java alternative?

  • @ravi14feb
    @ravi14feb Рік тому

    Great Stuff, amazing content. I have a quick question about the Codegen record popup, I am unable to see JavaScript in the target dropdown, using Playwright version 1.29.1. any lead will be highly appreciated

  • @clifflikovo6836
    @clifflikovo6836 Рік тому

    😂😂😂😂 where can i get the parry hotter book?

  • @MrSpinozadp
    @MrSpinozadp Рік тому

    awesome! thx

  • @MichaelStrother
    @MichaelStrother Рік тому

    Thank you for creating this... very helpful!

  • @BoazRymland-mx9qf
    @BoazRymland-mx9qf Рік тому

    Very useful indeed, clear and concise!

  • @amritesh94
    @amritesh94 Рік тому

    Does this work with Microsoft Auth Azure as well? In the QR i am only getting the client secret and not the period and digits

    • @danielkovacs3664
      @danielkovacs3664 Рік тому

      good questin it is interesting for me as well

    • @pabloarp9583
      @pabloarp9583 Місяць тому

      I have exactly the same question. Do you know something about it? it is very frustating

  • @HighRollersLounge
    @HighRollersLounge Рік тому

    That was useful, thank you!

  • @jaysont5311
    @jaysont5311 Рік тому

    This is very cool. Thanks for sharing

  • @darsi567
    @darsi567 Рік тому

    Can you show us how to mock the page after signup /login please

  • @flaviokonti5522
    @flaviokonti5522 Рік тому

    Thanks man, this is useful

  • @varsharani849
    @varsharani849 Рік тому

    hello sir can u plz make a video of how to handle the carousel for amazon website

  • @mikemace2860
    @mikemace2860 Рік тому

    At last! All the docs and info seem to be geared towards running playwright test code with npx and test and assert. As a beginner I was tearing my hair out trying to write simple (non test and assert) scripts which I could run easily. None of them worked in the test environment and this video was an eye-opener for me. Many, many thanks

  • @mikemace2860
    @mikemace2860 Рік тому

    Very informative video, thank you

  • @TristanBailey
    @TristanBailey 2 роки тому

    Some good advice on choice of selector for locator but more advice to build app better hocks rather than test better in playwright as title suggests

  • @varsharani849
    @varsharani849 2 роки тому

    Hello sir plz can u tell me how to perform click action or automate sub menu links of ecommerce website like if in a column more than 10 links so to perform click one by one

  • @ValorHeart
    @ValorHeart 2 роки тому

    Great explanation, you're using Playwright as "Library" here, right? i'll be happy to know if it's possible to use the html report and trace results in the Library mode as there isn't dedicated config file in that mode, right?

  • @peterspencer5112
    @peterspencer5112 2 роки тому

    Noob to CSS Selectors this is best video I've seen on the topic thanks

  • @prewinder
    @prewinder 2 роки тому

    Thank you, this was most helpful. Maybe you should turn this into a Udemy-class? You speak clearer than most of their tutors. What is the difference between using headless recorder versus playwrights recorder?

  • @rossfisher5543
    @rossfisher5543 2 роки тому

    Great video cheers! Better explanation than the docs.

  • @programandocomandersonsouza
    @programandocomandersonsouza 2 роки тому

    Hi friend. Good job.

  • @meddyba3518
    @meddyba3518 2 роки тому

    the danube website doesnt work anymore

  • @incialemdaroglu6964
    @incialemdaroglu6964 2 роки тому

    thank you for making it Cristal clear 🤩

  • @bloodylessy8608
    @bloodylessy8608 2 роки тому

    Hey ho. Great Video. Exactly what I was looking for so liked and subscripted :). Quick question : What is the best way to deal with some sort of "2 step authentication" (getting an code per email or clicking on a link to verify) I thought about some if/else condition like If "logged-in-page" is loaded within a certain timespan proceed... else print out in Error message "xy". Do you have an elegant solution for this case? (ps I know you could also open your mail acc. with playwright and fetch the needed data out of the arriving email, but on a Clear browser you should run into the same problem logging into your email acc). Best wishes and thank you mate :)

  • @incialemdaroglu6964
    @incialemdaroglu6964 2 роки тому

    thank you great video

  • @arturocdb
    @arturocdb 2 роки тому

    Hi, thank you for the video, i have question if you dont mind, its posible to obtain all product info in a data frame?, …, thank you!…

  • @prasadmadge8895
    @prasadmadge8895 2 роки тому

    Thanks for the awesome content. It helped allot.

  • @alekseyturchin1847
    @alekseyturchin1847 2 роки тому

    Awesome!!! Thanks for videos

  • @Matkotech
    @Matkotech 2 роки тому

    Awsome content, keep up the good work! 💪

  • @vitaly7196
    @vitaly7196 2 роки тому

    Great stuff! Thank you

  • @ValorHeart
    @ValorHeart 2 роки тому

    Thanks

  • @RockalaCarta
    @RockalaCarta 2 роки тому

    Excellent!... rock and coding... my passion!

  • @ColliderQZ
    @ColliderQZ 2 роки тому

    this is great content, much better than most popular videos on the topic. Really helped me understand the process of writing code. 👍

  • @affanahmed615
    @affanahmed615 2 роки тому

    Very cool ! Can we use xpaths instead of css selectors ? (since some folks might be transitioning from a selenium based framework) .

  • @VivekSingh-ch4hv
    @VivekSingh-ch4hv 2 роки тому

    Can we open codegen chromium browser with disabled web security?