TesterHQ - The Evil Tester Blog Aggregator

Dec 18, 2017 - 1 minute read - Evil Tester FAQ

Automating Storify and Twitter Using JavaScript From the Dev Tools

Original Blog Posting on [blog.eviltester.com]

TLDR; Migrating from Storify to Twitter, semi automatically with a simple JavaScript Snippet and Bookmarklet.

In this post I provide the code for my video showing how I migrated from Storify to Twitter Moments.

First investigate Twitter

First investigate Twitter GUI and manually migrate a link from Storify to Twitter.

Use Dev Tools to “Inspect” and find the CSS selectors for the fields I want to manipulate.

  • Input Field ".MomentMakerAddItemForm-input"
  • Button '.MomentMakerAddItemForm-button'

Check that I can use code from the Dev Tools to Type into a field

$('.MomentMakerAddItemForm-input').val('hello');

Check that I can click the button.

$('.MomentMakerAddItemForm-button').click()

Next Investigate Storify

Can I find the details I want in the Storify GUI?

Each Item in the story is:

'li[data-source="twitter"]'

And I can get the URL from the attribute: 'data-permalink'

Write some code to output the URLs to the console as a Proof Of Concept:

$('li[data-source="twitter"]').each(function( value )
 { console.log(this.getAttribute('data-permalink'));});

Expand this so that it outputs the code I can copy and paste into the Twitter console.

var outputStringForPastingIntoTwitter = "";
$('li[data-source="twitter"]').each(function( index ) {
outputStringForPastingIntoTwitter = outputStringForPastingIntoTwitter +
"$('.MomentMakerAddItemForm-input').val('" +
 this.getAttribute('data-permalink') + 
 "');\n" + 
 "$('.MomentMakerAddItemForm-button').click()\n";});
console.log(outputStringForPastingIntoTwitter);

I can also wrap this into a Bookmarklet using My BookMarklet Creation tool also on Github

storify migrator

And here is the video showing you how I did it.