feat: add cropOn screenshots capability

[TheKohan]

Proposed changes

This PR extends current capabilities of takeScreenshot command with cropOn prop which is of an ElementSelector type.

Motivation

Visual regression testing is something that has been on the horizon for some time #1222. This PR is aiming to fill the gaps and prepare the ground for further development in this area (will fit #2078 great). Component level screenshots are something that will greatly decrease screenshot size and make component-level tests possible.

Example usage

test-screenshot.yml

appId: com.example.app
---
- launchApp
- tapOn: Playground
- takeScreenshot:
    path: 'Playground'

 ║                                                             
 ║  > Flow: test-flow                                          
 ║                                                             
 ║    ✅   Launch app "com.exapmle.com"                                                        
 ║    ✅   Tap on "Playground"                         
 ║    ✅   Take screenshot Playground                          
 ║            

test-component-screenshot.yml

appId: com.example.app
---
- launchApp
- tapOn: Playground
- takeScreenshot: 
      path: "Markdown"
      cropOn:
        id: MarkdownInput_Example

 ║                                                             
 ║  > Flow: test-flow                                          
 ║                                                             
 ║    ✅   Launch app "com.exapmle.com"      
 ║    ✅   Tap on "Playground"
 ║    ✅   Take screenshot Markdown, cropped id: MarkdownInput_Example

Playground	Markdown

Testing

• would gladly accept any ideas of how to test it with confidence

[Matheeusb]

Hey @TheKohan -- About the tests, you can add a E2E test in the "e2e" module. About this feature, great delivery!

[Fishbowler]

Is there a reason to limit it to id than reuse the existing complex element selector logic that exists for other commands?

[TheKohan]

Is there a reason to limit it to id than reuse the existing complex element selector logic that exists for other commands?

To be completely honest i didn't think about it, but i think you're right. Let me try to reimplement this part.

[TheKohan]

@Fishbowler - adjusted API acording to your suggestions, it's indeed way better this way. Thanks for the hint !

[TheKohan]

Added test cases.

[TheKohan]

@amanjeetsingh150 - can you review this PR ?

[amanjeetsingh150]

Suggested change

	}
	if (cropped == null){
	maestro.takeScreenshot(file.sink(), false)
	} else {
	maestro.takePartialScreenshot(sink = file.sink(), bounds = cropped.element.bounds, compressed = false)
	}

nit: White spaces.

[amanjeetsingh150]

Hey @TheKohan this LGTM, we will be trying to get this in 1.40.0 CLI version.

[amanjeetsingh150]

Can you also raise a PR to update docs here:

https://github.com/mobile-dev-inc/maestro-docs

[TheKohan]

Thanks for answering, i'll try to find some time next week to cover things you've mentioned !