Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Automatic screenshot generation for Marketing & Tests #217

Closed
6 tasks done
Tracked by #536
M123-dev opened this issue Feb 18, 2021 · 38 comments
Closed
6 tasks done
Tracked by #536

Automatic screenshot generation for Marketing & Tests #217

M123-dev opened this issue Feb 18, 2021 · 38 comments
Labels
fastlane Automation of releases and marketing assets deployment P4 📢 Screenshot generation

Comments

@M123-dev
Copy link
Member

M123-dev commented Feb 18, 2021 •
edited by teolemon
Loading

What

  • We have around 80 languages in which we have products.
  • We have around 5 screenshots to make
  • A screenshot might need up to 10 scanned products.
  • The time to produce local feeling screenshots that are up to date with the current UI is tremendous.
  • And yet: “a majority of potential users will not read through the whole app description to find out, what your app is about. 50% of users make their purchase decisions based on the first impression”

Tasks

Write UI test to create the screenshots
Beta Give feedback
  1. Write UI test to create a screenshot of scan mode #1447
    P5 scan card 📢 Screenshot generation 🤳🥫 Scan 🧪 Tests
  2. Write UI test to create a screenshot of the product page #1449
    P5 📢 Screenshot generation 🧪 Tests
  3. Write UI test to create a screenshot of history #1446
    P5 history 📢 Screenshot generation 🧪 Tests
  4. Write UI test to create a screenshot of personal search settings #1448
    P5 ⚙️ Settings 📢 Screenshot generation 🧪 Tests
  5. Add a step to Screenshot generation UI tests to clean the top bar #1596
    📢 Screenshot generation
  6. Add screenshot generation to GitHub Actions pipeline #1433
    P5 📢 Screenshot generation
    teolemon

Other tasks

How

Part of
@M123-dev M123-dev added the fastlane Automation of releases and marketing assets deployment label Feb 18, 2021
@rolandgeider
Copy link

Judging from the issues in the repo, it seems the package is not maintained anymore, which is a pity

@M123-dev
Copy link
Member Author

@rolandgeider oh that's a shame, have you found an alternative for your project?

@rolandgeider
Copy link

sadly not, but I also haven't looked much into it. It's somehow possible to save the current screen contents to a file, but nothing so easy as that package, I was hoping you guys would have some ideas 😅

@M123-dev
Copy link
Member Author

@rolandgeider I have not yet dealt with the topic much more either, if I find a solution I will let you know.

@rolandgeider
Copy link

FYI, I have found this which looks promising, using only the flutter driver: https://medium.com/flutter-community/testing-flutter-ui-with-flutter-driver-c1583681e337

however it seems flutter_driver and flutter_launcher_icons have dependency incompatibilities 🙄 so I couldn't test it

@M123-dev
Copy link
Member Author

@rolandgeider I don't think we have a real alternative to the screenshot package.

Currently only a not merged fork supports null-safety. Its not future proof but its probably the best way to go for now.

@M123-dev
Copy link
Member Author

M123-dev commented Jun 9, 2021

Someone suggested to transfer the package to the FlutterCommunity, hopefully it gets accepted.

fluttercommunity/community#74

@M123-dev M123-dev added this to the V0.9 - Soft launch milestone Jun 26, 2021
@monsieurtanuki
Copy link
Contributor

For the record, in another project I developed a shell that can change the language of the iOS simulator and run tests - which include screenshots.
Basically, on a mac book and not 100% automatic but I just have to start the right simulator and run the shell: all the screenshots of all languages will be created for that simulator. Then do it again for the other 2 screen configurations/simulators needed in the AppStore.

@M123-dev
Copy link
Member Author

Two days ago in the fellowship frontend workgroup sync @gspencergoog mentioned screenshot tests. That gave me the idea that we might be able to abuse a screenshot testing tool to generate screenshots for fastlane. I couldn't find the one he mentioned but golden_toolkit (by ebay) looks very promising.

A article with some additional information: https://medium.com/flutter-community/flutter-screenshot-testing-as-a-solid-ui-regression-tool-630221a621e4

@gspencergoog
Copy link
Contributor

The one Flutter uses is Skia Gold. I don't think we can use their servers directly, unless we want to just use their code and set up our own instance that uses Google Cloud (it is open source, at least). I could ask the Skia team how hard/expensive it is to set up if you like.

@monsieurtanuki
Copy link
Contributor

Anyway we need iOS screenshots (minimum is one in 3 different screen sizes in English), without that it's not possible to have it in the AppStore (maybe OK in TestFlight, though).

@monsieurtanuki monsieurtanuki mentioned this issue Jul 22, 2021
Closed
@M123-dev
Copy link
Member Author

@gspencergoog thanks for the offer, but I think it is easier and more uniform to do the process (at least for generations not for tests) with the goolden_toolkit and github actions.

We only have to think about if plain screenshots are to booring and if so how we edit them.

@monsieurtanuki
Copy link
Contributor

Hey @M123-dev, you're supposed to be on vacation! ;)

@gspencergoog
Copy link
Contributor

@M123-dev That makes sense.

@teolemon teolemon changed the title Automatic screenshot generation for play / app store Automatic screenshot generation for Play / App Store Aug 24, 2021
@M123-dev M123-dev mentioned this issue Oct 3, 2021
Closed
5 tasks
@M123-dev M123-dev removed this from the V 1 milestone Jan 15, 2022
@teolemon
Copy link
Member

teolemon commented Feb 6, 2022

@monsieurtanuki note: I've managed to automate running the Screenshot tests suites on GitHub Actions for the classic apps, so we can run them on all platforms without blocking a personal computer

@monsieurtanuki
Copy link
Contributor

@teolemon That means classic Android and classic iOS apps, but not flutter so far, right?

@teolemon
Copy link
Member

teolemon commented Feb 6, 2022

Yes

@M123-dev
Copy link
Member Author

M123-dev commented Feb 6, 2022

Just did some further research and found another approach that doesn't use the not null safe screenshots package

https://blog.codemagic.io/flutter-automated-screenshot-testing/

@monsieurtanuki
Copy link
Contributor

I could not test it before for Android, but here we are:
test-screenshot-onboarding-home

For the record, that confirms my low esteem for Stack and Position widgets.

@teolemon
Copy link
Member

auto 407 / 670, for the record

monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 10, 2022
@monsieurtanuki
feat: openfoodfacts#217 - onboarding screenshots.
8a9b4de 
New files:
* `app_test.dart`: Onboarding screenshots.
* `screenshot_driver.dart`: Screenshot driver.

Impacted files:
* `analytics_helper.dart`: added a special case for screenshot init.
* `main.dart`: refactored for screenshots, and more specifically moved init code to be run before calling the app.
* `next_button.dart`: added a `Key` for test/screenshots
* `Podfile.lock`: wtf
* `pubspec.lock`: impacted by `pubspec.yaml`
* `pubspec.yaml`: added integration_test and flutter_driver to dev_dependencies.
@monsieurtanuki monsieurtanuki mentioned this issue Apr 10, 2022
Merged
monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 10, 2022
@monsieurtanuki
feat: openfoodfacts#217 - merge conflict fix.
ea99b2f 
Impacted files:
* `pubspec.lock`: impacted by `pubspec.yaml`.
* `pubspec.yaml`: upgraded the version numbers.
monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 10, 2022
@monsieurtanuki
Merge branch 'develop' into feat/openfoodfacts#217
f27c45b
@teolemon teolemon linked a pull request Apr 10, 2022 that will close this issue
feat: #217 - onboarding screenshot generation. #1529
Merged
@teolemon teolemon removed a link to a pull request Apr 10, 2022
feat: #217 - onboarding screenshot generation. #1529
Merged
monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 10, 2022
@monsieurtanuki
feat: openfoodfacts#217 - after code review.
7a46adb 
Impacted files:
* `main.dart`: added a comment.
* `screenshot_driver.dart`: removed a "forbidden" `print` statement.
monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 10, 2022
@monsieurtanuki
Merge remote-tracking branch 'origin/feat/openfoodfacts#217' into feat/…
8fcb62a 
…openfoodfacts#217
@teolemon teolemon modified the milestones: V1, V2 Apr 11, 2022
monsieurtanuki added a commit that referenced this issue Apr 11, 2022
@monsieurtanuki
feat: #217 - onboarding screenshot generation. (#1529)
e23117d 
New files:
* `app_test.dart`: Onboarding screenshots.
* `screenshot_driver.dart`: Screenshot driver.

Impacted files:
* `analytics_helper.dart`: added a special case for screenshot init.
* `main.dart`: refactored for screenshots, and more specifically moved init code to be run before calling the app.
* `next_button.dart`: added a `Key` for test/screenshots
* `Podfile.lock`: wtf
* `pubspec.lock`: impacted by `pubspec.yaml`
* `pubspec.yaml`: added integration_test and flutter_driver to dev_dependencies; upgraded the version numbers.
@github-actions github-actions bot mentioned this issue Apr 11, 2022
Closed
monsieurtanuki added a commit to monsieurtanuki/smooth-app that referenced this issue Apr 11, 2022
@monsieurtanuki
feat: openfoodfacts#217 - added shell parameters
f4c5df2 
Something like
```
flutter drive --driver=test_driver/screenshot_driver.dart --target=integration_test/app_test.dart \
 --dart-define=LANGUAGE=fr --dart-define=COUNTRY=FR --dart-define=PLATFORM=ios --dart-define=DEVICE=iPhone8Plus
```

Impacted files:
* `app_test.dart`: added shell parameters
* `Podfile.lock`: wtf
* `pubspec.lock`: wtf
@monsieurtanuki monsieurtanuki mentioned this issue Apr 11, 2022
Merged
monsieurtanuki added a commit that referenced this issue Apr 11, 2022
@monsieurtanuki
feat: #217 - added shell parameters (#1548)
99803de 
Something like
```
flutter drive --driver=test_driver/screenshot_driver.dart --target=integration_test/app_test.dart \
 --dart-define=LANGUAGE=fr --dart-define=COUNTRY=FR --dart-define=PLATFORM=ios --dart-define=DEVICE=iPhone8Plus
```

Impacted files:
* `app_test.dart`: added shell parameters
* `Podfile.lock`: wtf
* `pubspec.lock`: wtf
@teolemon teolemon linked a pull request Apr 17, 2022 that will close this issue
feat: Automate the generation of screenshots for iOS and Android in various languages & screensizes #1208
Closed
10 tasks
@teolemon teolemon mentioned this issue Apr 17, 2022
Closed
2 tasks
@monsieurtanuki monsieurtanuki removed their assignment May 11, 2022
@teolemon teolemon changed the title Automatic screenshot generation for Play / App Store Automatic screenshot generation for Marketing & Tests Jul 8, 2022
@teolemon teolemon modified the milestones: V2, Week 34 and 35 Aug 25, 2022
@teolemon teolemon removed this from the Week 34 and 35 milestone Aug 30, 2022
@g123k
Copy link
Collaborator

g123k commented Sep 8, 2022

Mmm why I am assigned to this issue?

@teolemon
Copy link
Member

teolemon commented Sep 8, 2022

unsure, fixing this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
fastlane Automation of releases and marketing assets deployment P4 📢 Screenshot generation
Projects
📢 Open Food Facts Marketing
Status: Done
🤳🥫 The Open Food Facts mobile app (Android & iOS)
Archived in project
Milestone
No milestone
8 participants
@g123k @teolemon @rolandgeider @stephanegigandet @gspencergoog @monsieurtanuki @M123-dev @alphaNewrex