Update App store screenshots

[JavonDavis]

This PR makes updates to the mocks and the screenshot tests. Apologies for this being a bit large the changes were a bit incremental and built upon the changes in #13082, #13031 and #13123.

Changes in this PR:

• Updates the mocks used for the screenshot tests
• Adds new util to switch between dark and light mode
• Updates the Screenshot to navigate to the new screens
• Updates the fastlane configuration file for the screenshots
• Updates the phone device used for the test to API 30, this was not done for tablet due to a bug that causes auto rotate to not happen

To test:

• Run the screenshot test
• bundle exec fastlane screenshots locale:"<locale>" device:"<phone or tenInch>" should generate the screenshots
• bundle exec fastlane android create_promo_screenshots locale:"<locale>"

[rachelmcr]

Rather than repeat a text attachment like this for all the screenshots (since most of the values are the same each time), you can set the text styles in the global stylesheet playstoreres/assets/style.css (defined in line 5) and set the text_size and text_offset for the device (e.g. line 22 for the Pixel 3) rather than set a size and position for each screenshot.

Then, you can set the text value for each screenshot like this:

		// Create a site or start a blog
		{
			"device": "Pixel 3",
			"screenshot": "images/phoneScreenshots/1-create-a-site-or-start-a-blog.png",
			"background": "playstoreres/assets/attachments/phone-backgrounds/Circles-2.png",
			"text": "playstoreres/metadata/%s/play_store_screenshot_2.txt"
		},

The exception to that is the first screenshot, since the text has to be added as an attachment there to overlay the other file attachments.

[AliSoftware]

🎉

[AliSoftware]

nit: I know this was already implemented that way before your changes, but wondering why we create an intermediate String name variable here – while it's only used once, just 2 lines below – instead of using the string directly on line 105 🤷‍♂️

Not a big deal at all, you can ignore this nit and keep as is, but just felt curious.

[JavonDavis]

Yeah I'll leave as is, at the very least it keeps the line shorter 🤷🏽‍♂️

[AliSoftware]

moveToStats() already include a idleFor(8000) at the end of its code (and moveToStats is only called from here), so you might want to combine the two idleFor(8000) and idleFor(2000) in a single idleFor(10000) – or reduce that duration if the long pause was previously used more for debugging – and only keep one.

(Not sure which of the two is the best to keep (end of moveToStats or here 🤷 ), I'll let you decide)

[JavonDavis]

The stats can take a while to load so I'll leave the time as is in the moveToStats but I've removed this second one, it's not necessary anymore!

[AliSoftware]

Not directly related to this PR (as the potential risk was true before those changes too I think), but commenting here to keep it in mind:

Is there a risk that this font could not installed on the machine the user is using to generate the screenshots (or, on CI)? If that's the case, there' a risk the HTML rendering uses a substitution or default system font instead I think, which could easily then be overlooked, especially if the person reviewing the screenshots doesn't know what the font is supposed to look like…

Maybe we could add a check about that in our scripts generating the final promo screenshots 🤔 worth to keep in mind at least.

[JavonDavis]

I'll open a separate issue to track this, thanks for bringing it up!

Addressed in Slack