task(GUIDEFRAME-55): updated tutors demo

Signed-off-by: Pat O'Connor <paoconno@redhat.com>

Author: chipspeak

.DS_Store

@@ -3,7 +3,7 @@ name: GuideFrame Video Render
 on: [push]
 # All jobs in the workflow
 jobs:
-  tutors-test:
+  render-tutors-demo:
     runs-on: ubuntu-latest
     # steps to run
     steps:
@@ -31,10 +31,10 @@ jobs:
         nohup Xvfb :99 -screen 0 1920x1080x24 &
         
         # Run the Python script
-        python3 tutors_test.py github
+        python3 tutors_demo.py github
     # Upload the screen recording as an artifact
     - name: Upload screen recording as artifact
       uses: actions/upload-artifact@v4
       with:
-        name: tutors-test
-        path: ./tutors_test*.mp4
+        name: render-tutors-demo
+        path: ./tutors_demo*.mp4

.github/workflows/render.yaml

@@ -1,26 +1,35 @@
 ## Step 1 
-First, let's open tutors.dev. On this page we see the web toolkit, in addition to any courses we may recently have accessed.
+This brief GuideFrame demo begins by opening tutors.dev. This is achieved by using the open u r l function prior to step 1.
 
 ## Step 2
-Before we go any further, let's change to dark mode using the layout button in the top right of the screen.
+We can demonstrate the ability to pass multiple actions to GuideFrame by activating dark mode. This involves 3 calls to the click element function. We'll also call the sleep function for 0.5 seconds between each action.
 
 ## Step 3
-Now that we're in dark mode, let's navigate to the docs page by clicking the docs button under the web toolkit
+Now let's use the hover and click function to move to the tutors reference manual.
 
 ## Step 4
-On the docs page, we can see a number of cards. Each of these cards leads to a specific portion of the getting started guide.
+We can pass None to lambda in order to hang on a page. This is useful for when you wish to simply add voiceover to a static page. Let's use the hover over element function a few times here. We'll also pass the order argument. This ensures that the action begins before the voiceover.
 
 ## Step 5
-The getting started card introduces the basic design model of tutors.
+We'll start with the getting started card.
 
 ## Step 6
-The simple starter card provides a helpful template course.
+Now let's move on to the simple starter card.
 
 ## Step 7
-The alternative starter card provides an example course to demonstrate layouts and nesting.
+Let's continue to the alternative starter card. Before using the scroll to element function to move to the reference course.
 
 ## Step 8
-The reference course contains another example course. This one contains all Tutors learning objects for demonstration.
+In this case, we use this function to access an element that isn't in the display window.
 
 ## Step 9
-Finally, let's return to the getting started card and click it to demonstrate the getting started page.
+Let's use the click element by xpath function. We'll use it to access the search bar at the top of the screen.
+
+## Step 10
+With the search bar open, let's use the type into field function to type in card.
+
+## Step 11
+Let's open the link in the first result in a new tab. We can do this by using the open link in new tab function.
+
+## Step 12
+And that concludes this GuideFrame demonstration.

tutors_test.md

@@ -3,17 +3,8 @@
 from guideframe.utils import guide_step, get_env_settings  # Importing the guide_step and get_env_settings functions from guideframe_utils.py
 
 
-'''
-As of GUIDEFRAME-31 as much logic as possible has been moved to external files to aid legibility
-and promote the ability to have easily create a new test without having to adjust the GuideFrame logic itself.
-This version also features the markdown extraction logic from the audio.py file in addition to a utils function for grabbing
-env variables related to inputs for the ffmpeg recording.
-'''
-
 # Function to run the main walkthrough section
 def guideframe_script():
-    # Main walkthrough logic here divided into steps etc (will hopefully be more legible after future refactors)
-    #----------------------------------------------------------------------------------------------------------------------------------------------------------------------
     try:
         '''
         Setup - Setup driver and Open Tutors.dev and set window size etc
@@ -29,7 +20,7 @@ def guideframe_script():
         '''
         guide_step(
             1, 
-            lambda: None
+            lambda: None,
             )
 
         '''
@@ -38,16 +29,18 @@ def guideframe_script():
         guide_step(
             2,
             lambda: click_element(driver, "span.ml-2.hidden.text-sm.font-bold.md\\:block"),
+            lambda: sleep_for(0.5),
             lambda: click_element(driver, "label[data-testid='segment-item']"),
-            lambda: click_element(driver, "span.ml-2.hidden.text-sm.font-bold.md\\:block")
+            lambda: sleep_for(0.5),
+            lambda: click_element(driver, "span.ml-2.hidden.text-sm.font-bold.md\\:block"),
             )
 
         '''
         Step 3 - navigating to the docs page
         '''
         guide_step(
             3,
-            lambda: hover_and_click(driver, "/course/tutors-reference-manual")
+            lambda: hover_and_click(driver, "/course/tutors-reference-manual"),
             )
 
         '''
@@ -96,22 +89,44 @@ def guideframe_script():
             )
 
         '''
-        Step 9 - Retuning to the original card
+        Step 9 - Click the search button
         '''
         guide_step(
             9,
-            lambda: scroll_to_element(driver, "/note/tutors-reference-manual/unit-0-getting-started/note-01-getting-started"),
-            lambda: hover_and_click(driver, "/note/tutors-reference-manual/unit-0-getting-started/note-01-getting-started")
+            lambda: click_element_by_xpath(driver, '/html/body/div[1]/div[1]/header/header/section/div[3]/div[1]/div[3]/button/div/span[2]'),
             )
+        
+        '''
+        Step 10 - Search for a term
+        '''
+        guide_step(
+            10,
+            lambda: type_into_field(driver, "search", "card"),
+            )
+        
+        '''
+        Step 11 - Open the search result in a new tab
+        '''
+        guide_step(
+            11,
+            lambda: open_link_in_new_tab(driver, "https://tutors.dev/note/tutors-reference-manual/unit-1-fundamentals/note-02-cards")
+        )
+        
+        '''
+        Step 12 - End demo
+        '''
+        guide_step(
+            12,
+            lambda: None
+        )
+        
 
     finally:
         print("Script complete -> moving to assembly")
         driver.quit()
 
-# End of walkthrough section
-#----------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-# Main function to run the test and assemble the clips (now passing the number of steps to the assembly function)
+# Main function to run the test and assemble the clips
 if __name__ == "__main__":
     guideframe_script()
-    assemble(9)
+    assemble(12)