Things I knew would be bad about iOS development, going in:

  • XCode.
  • App Store’s draconian policies 1
  • A general malaise accompanied by glancing longingly at old stylesheets, as if they were photos of spurned ex-lovers

Things that I did not know would be bad about iOS development, going in:

  • Spending three hours per version taking goddamn screenshots.

Seriously, up until recently, this was my workflow:

  1. Open app in simulator.
  2. Navigate to each pretty view and take screenshot.
  3. Curse loudly when you realize you accidentally took a Mac screenshot (which ahs chrome) instead of a simulator screenshot.
  4. Correct your mistake.
  5. Save in specific folder.
  6. Open each screenshot in Sketch, save it into iPhone SVG.
  7. Add a pretty little background with explainer text. 2 3
  8. Make sure it’s literally pixel-perfect, because you can only upload screenshots that are 1224x2238 or whatever the hell.
  9. Upload to the comically god-awful iTunes Connect, which will often drop uploads or reorganize them just cuz.
  10. Repeat for the six other device sizes. 4
  11. Drink. Drink heavily.

I know, It looks merely tedious on paper: but to do this flawlessly takes me around ninety minutes per design change (which, at this point, is pretty much every minor version) – and that’s assuming 5 that I don’t stop halfway through because I realize there’s some issue or that I want to showcase a different screen or whatever.

Thankfully, I have a new, much better solution, which takes a little work up front but shaves this into around five minutes of work (and I don’t even have to be there for that five minutes!)

Download some stuff.

“Some stuff” is:

  • snapshot, which automates the screenshooting process
  • Sketch to App Store, which automatically embeds screenshots in chrome + backgrounds 6
  • deliver, which automatically uploads new jank to iTunes Connect

Follow all the instructions for these, which amount to installing gems in the same folder as your XCode project.

Set up UIAutomation script to grab screenshots.

I’m not going to try to cover UI Automation here in detail – since my understanding of it is so meager, and my use case so basic – but if you’re unaware, it’s basically JavaScript to interact with iOS devices. Apple probably has the best tutorial.

My script looks like this (keeping in mind that captureLocalizedScreenshot is a magic method brought to us by snapshot):

#import "SnapshotHelper.js"

var target = UIATarget.localTarget();
var app = target.frontMostApp();
var window = app.mainWindow();

// Get full list.
target.frontMostApp().mainWindow().tableViews()["Sorry, we can't get you recipes until you connect to the internet!"].elements()[0].tapWithOptions({tapOffset:{x:0.40, y:0.54}});
target.delay(0.5);
captureLocalizedScreenshot("Check out tons of great recipes");

// Get recipe detail.
target.frontMostApp().mainWindow().tableViews()[0].cells()["Manhattan"].tapWithOptions({tapOffset:{x:0.62, y:0.39}});
captureLocalizedScreenshot("Get ingredients, directions, and fun facts");

// Get search page.
target.frontMostApp().tabBar().buttons()["Search"].tap();
target.frontMostApp().mainWindow().tap();
target.frontMostApp().mainWindow().tableViews()[0].cells()["Gin"].tap();
target.frontMostApp().mainWindow().tableViews()[0].searchBars()[0].tap();
captureLocalizedScreenshot("Search for exactly what you're in the mood for");
target.frontMostApp().mainWindow().tableViews()[0].cells()["Gin + Lemon juice"].tap();

// Get favorites.
target.frontMostApp().tabBar().buttons()["Favorites"].tap();
target.frontMostApp().mainWindow().tap();
target.frontMostApp().mainWindow().tap();
captureLocalizedScreenshot("Keep track of your favorites");

// Get shopping list.
target.frontMostApp().mainWindow().tableViews()[0].cells()["Shopping List"].tap();
captureLocalizedScreenshot("Figure out what you need to buy");

Run that script.

Now you have a folder – probably ./screenshots/ – filled with all of those dope images. Life is great.

(If you’re going to throw them into Sketch, as I’ve detailed below, then you only actually need the iPhone 6S versions, but I think it’s worth going through the entire list just as a last-minute UI veriication.)

Add those images to Sketch to App Store and Export

The actual plugin here does a good job of outlining what you need to do here: again, a bit of up-front effort but you will literally only need to do it once ever.

Call deliver

Running this the first time

In conclusion

My process is now this:

  1. ./snapshot
  2. Replace old Sketch images with new ones.
  3. ./deliver

I sit back, let iTerm whirr, and read Murakami for a couple minutes. These are good wins for my efficiency, but even better wins for my sanity.

  1. Exhibit #1256. [return]
  2. Fun fact: the App Store expressly prohibits all images which aren’t direct screenshots of the app. [return]
  3. Fun fact: everyone breaks that rule anyway. Because the App Store is draconian and awful. [return]
  4. Remember when iOS’s major selling point to developers was only having to design for one screen size? That was cool. [return]
  5. (naively) [return]
  6. If you’re a goodie-two-shoes and just want to use the raw screenshots, you don’t need this [return]
Liked this post? Follow me!
Twitter • RSS • Email