From 8483755a11e341a7789d6bae593b722142a0ff05 Mon Sep 17 00:00:00 2001
From: Pat O'Connor <paoconno@redhat.com>
Date: Sun, 23 Mar 2025 12:52:39 +0000
Subject: [PATCH] task(GUIDEFRAME-55): updated tutors demo

Signed-off-by: Pat O'Connor <paoconno@redhat.com>
---
 .DS_Store                                   | Bin 8196 -> 12292 bytes
 .github/workflows/render.yaml               |   8 +--
 guideframe_tutors_demo.md                   |  35 +++++++++++++
 tutors_test.py => guideframe_tutors_demo.py |  53 +++++++++++++-------
 tutors_test.md                              |  26 ----------
 5 files changed, 73 insertions(+), 49 deletions(-)
 create mode 100644 guideframe_tutors_demo.md
 rename tutors_test.py => guideframe_tutors_demo.py (68%)
 delete mode 100644 tutors_test.md

diff --git a/.DS_Store b/.DS_Store
index ac6da7cc9200808cc0d52a5d327f0edab7ce967f..0ccc17de6a73c7646060c8583628b723bfdeee99 100644
GIT binary patch
literal 12292
zcmeHNPj4GV6n~pP#7Ssmq?UrjA0t4jP*UvJNfRNV)T9RvTp9$20*f6x#l_wY@rHn`
zRJkGke1?7mI09dyM~-}i-Z{bVz1@vx#xu4fq#W8AX=c{D^P4yCH{&<+-YyXZ_2X8B
z=mrrLkhv~CkKzZS(lTl#@pH~2X%=?^<T^60i$n<>(lN@A`XjAJZ_MBp<L8iz6bo{Q
zPpFOFw&*7HP}e@}#{11~+?2Ky`~#7{{ws-Sc%N?L`OW-3u9v7K{T!j(rv}E>rWW^w
zXFhobJOiEq&wyv(S!96sUZjGt-=}wd=^5}0Jkt!YeJCMwy_3~vX)UG$1s~!0IUnIA
z;TnE`+$&}EPFA0#wLpOpDC!g%WG+UK!g0UE%~9`U^;ue{a0*g51)1a^^H2hj4qQo^
zQ?QfPzVr-u21Xfp8@F7(_qN^lp1H63-oUTGKmQ*22tND+@v{>k6a4B?SNGfLH?)7G
z_~(msm+ru8-=&XGv#&4S`Ou>eeg;DI=!=lkrf(1}=*U$MzamKMi_GsR(Is-EAXrf(
zuApU`x`OJUmmZ=O93$vqynP+ZnrfpRi*26t53_Oq**xra`boL`S1>a>H~-v1VWF^G
z_<ZlH_+&3>B**=F<LDm$`Z$ie&HTF2{G`)935!=hh@+&@iP}d3=(O5s^4X`Is1={o
z<Kw8+7wlg8ps-k242v%h29>Q^b+uHfRZmw-gYEV5YH4F@>-2Q7aP7@^-@6-r-R(s&
zlZg~$R+O%!zt78Ga5YxRZ}*O(ZX7W&+{YUhG7ms%gkVd835szwq&K7k+C~tjNmbgg
zFD_mn!9!)b79k-G1ywRcRiC8b)rkl*cmx(S8B2<cvO@|mGmn*V*)XOYEIlX2p$#v&
zi5No;2fb$BcZ_Y_t`GA(5o5?<rZvoPZX8nN&u5>_9AU^{{k6Fn%BVUtf%d@@Mf*{N
zAwyP-9Z|E(U?b#^kt0kQY<BE2@|AC_W6^v(!jQr9KJ$fD^G&-RJnIt>h79J)fw*Ot
z!CXy1m@@c(V%H-N|5~`3fG}hTSC6e+<=dPgL%14`Fk}c<D&i_E7l*@RY*c+(6FbJ%
zYz=m>4J(-2082mGwsXzd&jVP~h}K<Ua<Qf>iq<PyPvQB9EE}(^$LX-x{tcUqHK1wm
zqC;*-o7fSUi+z_4Y(wT=Q*=PrK6wT_1D*lTfM>un@P8P11>j}4Xd#@n2$|pAhd9_-
zw{*>qp2emOjK1;nF-!B-o$ud=9=>26DI5G8{P7OEWP0Cx5YYPOb}<ePeWM*agzCZN
z3XWSH@%TfO(laznXe3s^Bhii;OLSl23>+Ugz#*=IC_!77#>XUWRM%}7aJrANaz8_N
z*mCIN5olw-NN=Na#*C@VzBTpOLg?CnlYT(As4NH8V{q5aj{L@fRYv_#nZb81AZH)P
z*BXw(HPmas#lq7XxMIE!Fi-X`KrqYme=9OyzktjZv}!_P6~|9&?{aW{qV&GNYaMgg
z#d^Rj>T7^oYiq!0twe@?zx2q^^}(Q4t|1t-F(xkbBNRY##)W>uLqjPe5;QA+t)@;4
zdqf&BSu2H*KQ5h+mj;9N?akFvb*pmDNUgeQM9NrWBqt;6;bhtvOt`|SE^iM#X;GCI
z@CRV8(fkyuf<K~jv1(?^-Ggfkn5QXwaKvrc>(_d4vEahPRB0@@@Oc!-FhOjFr@}kp
zHEhC$ACzHkUGnqjjUk^+z*KmL!Qp?(RQNpVV#sIyhxq(6xiS7fRGddfy0MJn4m5Ur
z|0j)n;TiA@Je>>#bGv)Hb?6p2^y7E!CFC!W^Mtn29EH4!M=h`7QOm1%)McgZ4qxNm
hSz6-?>C!&}kXL1X{~!IF+VB6j)%_D|^J(Az{{tM1I5hwO

delta 173
zcmZokXmOBWU|?W$DortDU;r^WfEYvza8E20o2Vx_*+7Ry63Ax&5sW}_28K+A5{7sn
z)MF^vd{DxReX;^$<Ysmb77j+q$vg_XCu=HR*qo^Jmua)Vz;8xIk;xmyB_}tDf0!)B
wm?y{#G74w|H;`}z*|J%X@jLTmejP(rpy3P+lO1)GC&%;5+Pqhw7gcXI05|?77XSbN

diff --git a/.github/workflows/render.yaml b/.github/workflows/render.yaml
index 46b7331..3f498dc 100644
--- a/.github/workflows/render.yaml
+++ b/.github/workflows/render.yaml
@@ -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 guideframe_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
\ No newline at end of file
+        name: render-tutors-demo
+        path: ./guideframe_tutors_demo*.mp4
\ No newline at end of file
diff --git a/guideframe_tutors_demo.md b/guideframe_tutors_demo.md
new file mode 100644
index 0000000..9ec0199
--- /dev/null
+++ b/guideframe_tutors_demo.md
@@ -0,0 +1,35 @@
+## Step 1 
+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
+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 let's use the hover and click function to move to the tutors reference manual.
+
+## Step 4
+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
+We'll start with the getting started card.
+
+## Step 6
+Now let's move on to the simple starter card.
+
+## Step 7
+Let's continue to the alternative starter card. Before using the scroll to element function to move to the reference course.
+
+## Step 8
+In this case, we use this function to access an element that isn't in the display window.
+
+## Step 9
+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.
\ No newline at end of file
diff --git a/tutors_test.py b/guideframe_tutors_demo.py
similarity index 68%
rename from tutors_test.py
rename to guideframe_tutors_demo.py
index 434be80..d3ca986 100644
--- a/tutors_test.py
+++ b/guideframe_tutors_demo.py
@@ -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,8 +29,10 @@ 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"),
             )
 
         '''
@@ -47,7 +40,7 @@ def guideframe_script():
         '''
         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)
diff --git a/tutors_test.md b/tutors_test.md
deleted file mode 100644
index 13fd152..0000000
--- a/tutors_test.md
+++ /dev/null
@@ -1,26 +0,0 @@
-## 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.
-
-## Step 2
-Before we go any further, let's change to dark mode using the layout button in the top right of the screen.
-
-## 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
-
-## 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.
-
-## Step 5
-The getting started card introduces the basic design model of tutors.
-
-## Step 6
-The simple starter card provides a helpful template course.
-
-## Step 7
-The alternative starter card provides an example course to demonstrate layouts and nesting.
-
-## Step 8
-The reference course contains another example course. This one contains all Tutors learning objects for demonstration.
-
-## Step 9
-Finally, let's return to the getting started card and click it to demonstrate the getting started page.
\ No newline at end of file