How to automate chrome with playwright

First open Chrome like this:

C:\Program Files\Google\Chrome\Application\chrome.exe 

--remote-debugging-port=9222

--user-data-dir="C:\Users\User\AppData\Local\Google\Chrome\User Data\Profile 2"

--save-storage

Find the profile dir with  chrome://version/

Then manually log in to the website you want to automate.

Now run:  npx playwright codegen --target=javascript -o script.js https://example.com

...and it will record your actions.

After that, Playwright can connect to chrome and repeat the actions.

More notes

• If you need exact mouse trajectories or raw timestamps: Use rrweb to record events in-page and replay to produce precise input traces. Or capture DevTools Protocol Input events (use a small recorder that listens to Input.dispatchMouseEvent and Input.dispatchKeyEvent) and convert to Playwright calls (page.mouse.move + page.mouse.down/up + page.keyboard.type).

Analyzing HAR files with jq

See gist:

Javascript web frameworks, 2022

 A list:

• React - library, jsx, facebook
• Vue - easier than backbone, good cli
• Angular - typescript, heavy, google
• Ember - opinionated, fast development <-- this one is good
• Backbone - stable, reliable, data rendering, easy, lightweight
• Aurelia - convention over configuration, standards, very easy
• Lit - very fast, lightweight, google
• Mithril - lean, fast, simple

Mojolicious version 9 cheat sheet

Mojo 9 changes:

s/over/requires/

s/route/any/

s/via/methods/

Guide to debugging Mojolicious applications

When MOJO_MODE=development or is not set, you should see exceptions rendered in the browser. But if you don't, try creating a templates/exception.html.ep template that contains this: %= $exception

You can also create error templates for different environments:

• templates/exception.production.html.ep
• templates/exception.development.html.ep

Mojo provides useful hooks that can be used to dump out debugging info:

Why not to require javascript

Reasons not to require javascript for critical features of your website:

• It can slow down the user experience.
• Standard HTML form and browser controls are the way they are for a reason: They work. Subvert or reinvent them at your peril.
• It's much more likely Javascript code won't work as expected in all browsers, than HTML.
• When some part of it breaks, forcing the user to disable it, they won't be able to use the rest of the website
• Not all browsers have javascript, for example Lynx (text only) and JAWS (i.e. screen readers which blind people use).
• It often makes automated testing harder
• When the user gets logged out due to inactivity, the AJAX calls may behave unexpectedly

Disclaimer: This is my opinion only, based on personal experience.

Client-side web design frameworks

A short list:

• Foundation - doesn't work in IE8, and doesn't even degrade gracefully
• Bootstrap - from Twitter. Works in IE8
• Alternatives are available

Web developer browser plugins

Chrome:

• Chrome itself doesn't require admin privileges to install
• Chrome has dev tools built in - type F12 and select a tab e.g. Network, or right-click on the page and choose 'Inspect element'
• chrome://net-internals/
• Web developer plugin
• Modify headers

Internet Explorer:

• Internet Explorer should be installed by default
• It has some dev tools built in - type F12 and then:
• Menu: Find | Select element by click
• Menu: Cache | View cookie information
• Tab: Script | Console
• Tab: Network (IE9 and later) | Go to detailed view | Double-click an item for headers and cookies

Standalone:

• Fiddler2 - inspect and modify HTTP traffic (requires admin)
• DebugBar (requires admin)
• Proxomitron - inspect and modify headers,  (does not require admin rights)
• Proximodo a clone of Proxomitron (requires admin)
• Charles Proxy
• Other proxies

Non-GUI:

• curl -D -
• wget -S

(source, source, source, source, source)

Android: Don't refresh page when no signal

chrome://flags/#enable-offline-mode

and

chrome://flags/#enable-offline-load-stale-cache

Unfortunately this doesn't work anymore - those flags were experimental.
In fact I've switched to Firefox (which is also much faster on Android) because Chrome tabs kept annoyingly reloading when the phone had no signal.

Simple small Perl webservers

Quick start, if it's just a proof-of-concept and won't be running for long:

• HTTP::Daemon - can't get simpler than this. It even picks a port for you
• HTTP::Server::Simple - it works

More complicated to set up, but much more robust:

• PSGI/Plack - the future
• lighttpd - it's pronounced lighty

Log and email your Apache errors

In the .htaccess at the root of the site:
ErrorDocument 404 http://www.example.com/error_page.php?err=404
ErrorDocument 503 http://www.example.com/error_page.php?err=503
etc.

In error_page.php:


$myemail = "someone@example.com";
$subject = "example.com: $errorNum error";
$message = "$errorNum Error Report:\n";
$message .= "\nHTTP_REFERRER: ".$_SERVER['HTTP_REFERER'];
$message .= "\nREQUEST_URI: ".$_SERVER['REQUEST_URI'];
$message .= "\nHTTP_USER_AGENT: ".$_SERVER['HTTP_USER_AGENT'];
$message .= "\nQUERY_STRING: ".$_SERVER['QUERY_STRING'];
$message .= "\nREMOTE_ADDRESS: ".$_SERVER['REMOTE_ADDR'];


ob_start();
print "\n\nSERVER = "; print_r( $_SERVER );
print "\nGET = "; print_r( $_GET );
print "\nPOST = "; print_r( $_POST );
print "\nFILES = "; print_r( $_FILES );
print "\nREQUEST = "; print_r( $_REQUEST );
print "\nSESSION = "; print_r( $_SESSION );
print "\nENV = "; print_r( $_ENV );
print "\nCOOKIE = "; print_r( $_COOKIE );
print "\nprevious php_errormsg = "; print_r( $php_errormsg );
print "\nargv = "; print_r( $argv );
$output = ob_get_clean();
$message .= "\n\n$output\n";


# email the error
mail($myemail,$subject,$message,"From: support@example.com");


# log the error
$myFile = "logs/error.".date('Y_m_d-H.i.s').".log";
$fh = fopen($myFile, 'w');
$stringData = $message;
fwrite($fh, $stringData);
fclose($fh);
?>

Perl web frameworks

• Mason - Not MVC, and tightly integrated into Apache
• Catalyst - MVC (recommended)
• Plack - PSGI (recommended)
• Dancer - not used
• Mojo
• TemplateToolkit (recommended)

Text-based web browsers

• http://w3m.sourceforge.net/
• http://lynx.browser.org/
• http://www.jikos.cz/~mikulas/links/

Free counter

Needs no registration, works with Blogger: http://www.e-zeeinternet.com/

Screen capture for long pages in firefox

The Firefox add-on Aviary is a very powerful screenshot program that can easily capture a really long web page as an image.

Basic Javascript

if( document.getElementById ){
 var myReference = document.getElementById('divID');
}

CSS basics

#id = id
.class = class

Zend PHP version

Zend Framework 1.5.1 requires PHP 5.1.4 

Enjoy logging with Zend

Output to the page within Zend PHP engine:

$writer = new Zend_Log_Writer_Stream('php://output');

$logger = new Zend_Log($writer);

$logger->log('Enjoy this test', Zend_Log::DEBUG);

Or to the webserver error log:

$writer = new Zend_Log_Writer_Stream('php://stderr');

$logger = new Zend_Log($writer);

$logger->debug('Beginning log');

Make Firefox 3 look like Firefox 2

From the neo-luddite department.