Merge Image Injection document (#268)

src/components/Footer.jsx

@@ -10,7 +10,13 @@ const Footer = ()=> {
     return (
         <>
             <FeedbackButtons />
-            <SubscribeButton />
+            {/* <SubscribeButton /> */}
+            <div className='footer-cta rounded'>
+                <div className='flex items-center justify-between flex-wrap'>
+                    <h3 className='cta-heading m-0'>Learn how to execute low code tests across 3000+ device / browser environments.</h3>
+                    <a href='/request-demo' target={'_blank'} className='cta-link border border-green-600 px-4 py-1.5 bg-green-600 text-white rounded h-10'>Schedule a free demo</a>
+                </div>
+            </div>
             <div className="footer_greyBox">
                 <svg width="109" height="26" viewBox="0 0 109 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path

src/components/Footer.scss

@@ -1,7 +1,5 @@
 .footer_docs{
-  margin-top: 0px;
-  position: relative;
-  top: 40px;
+  margin: 2rem 0;
   @media (max-width: 576px) {
     overflow: hidden;
     top: 20px;
@@ -201,6 +199,7 @@
           border-radius: 3px;
           background-color: #FFF;
           box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03);
+          width: 100%;
           @media only screen and (max-width: 767px) {
             max-width: 100%;
             width: 100%;
@@ -221,7 +220,7 @@
         background: #03A973 !important;
         border: 1px solid #03A973 !important;
         max-width: 100%;
-        width: 92%;
+        width: 97%;
         height: 40px;
         border-radius: 4px;
         -webkit-border-radius: 2px;
@@ -320,4 +319,27 @@
   .text_end{
     text-align: end!important;
   }
+}
+.footer-cta{
+  background-color: #EFEFEF;
+  padding: 2rem 3rem;
+  @media only screen and (max-width: 767px) {
+    padding: 2rem;
+  }
+  .cta-heading{
+    flex: 0 0 70%;
+    font-size: 24px !important;
+    line-height: 38px !important;
+    margin: 0 !important;
+    @media only screen and (max-width: 1023px) {
+      flex: 0 0 100%;
+      padding: 0 0 2rem;
+    }
+  }
+  .cta-link{
+    font-weight: 600;
+    font-size: 18px;
+    height: fit-content;
+    text-align: center;
+  }
 }

src/components/LeftNav.scss

@@ -2,7 +2,7 @@
 
 .leftNav {
   position: sticky;
-  top: 0;
+  top: 4.5rem;
   height: 100vh;
   background-color: #F6F7F9;
   font-size: 14px;

src/components/navcards.jsx

@@ -164,7 +164,7 @@ const data = [
 
 const Card = ({ title, description, path }) => {
     return (
-        <a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex mr-2 mb-2 w-full ">
+        <a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex w-full ">
             <div className="w-fit">
                 <span className="card_heading">{title}</span><br/>
                 <span className="card_desc">{description}</span>
@@ -182,7 +182,7 @@ const Card = ({ title, description, path }) => {
 
 const CardList = () => {
     return (
-        <div className="w-full flex flex-wrap">
+        <div className="w-full flex flex-wrap gap-2 justify-center">
             {data.map((item) => (
                 <Card key={item.id} title={item.title} description={item.description} path={item.path}/>
             ))}

src/pages/docs/test-cases/create-steps-nl/reorder.md

@@ -17,11 +17,9 @@ contextual_links:
 ---
 
 ---
-
+ 
 You can reorder test steps in a test case. Here’s how.
 
- 
-
 ---
 ## **Pre-requisites:**
 

src/pages/docs/test-cases/image-injection.md

@@ -1,29 +1,53 @@
 ---
-title: "Image injection"
-metadesc: "How to inject image /QR code/ barcode in teststeps "
+title: "Image Injection"
+pagetitle: "Image Injection Testsigma: Enhance Mobile App Testing"
+metadesc: "Image Injection feature elevates mobile app testing. You can seamlessly integrate QR codes and images to create realistic test scenarios on Android and iOS."
 noindex: false
 order: 4.70
-page_id: "Image injection"
+page_id: "Image Injection"
 warning: false
+contextual_links:
+- type: section
+  name: "Contents"
+- type: link
+  name: "Manual Image Injection using NLP"
+  url: "#manual-image-injection-using-nlp"
+- type: link
+  name: "Camera Image Injection during Recording"
+  url: "#camera-image-injection-during-recording"  
 ---
-<br>
-When you build an app that has an image scanning functionality you need to use a real device to test the feature. With Testsigma’s camera mocking or image injection feature, you only need to upload the mobile app under test and specify the image to use instead of the actual scan of the device.
+
+---
+
+Testsigma allows you to enhance your testing process by inserting images into your test steps using Image Injection. You can use this feature, particularly for scenarios where you must interact with images, QR codes, or visual elements within your application. This documentation will guide you through both methods of injecting images into your test case: manual image upload and camera image injection.
 
 [[info | Note:]]
-| This feature is applicable only to native iOS and Android applications.
-
-With the help of the following simple steps, you can perform testing of the image scanning feature of your mobile application:
-
-1. Navigate to **Test Development>Uploads**. Under the **Uploads** page,
-   1. Upload the application under test onto the Testsigma cloud. Note that the application should have the image scan feature enabled. *For more information, refer to [uploading images](https://testsigma.com/docs/uploads/upload-apps/)*.
-   2. Upload the image files. The image should be in PNG format. *For more information, refer to [uploading files](https://testsigma.com/docs/uploads/upload-files/)*.
-   3. Copy the path of the uploaded image.
-2. Navigate to **Test Development**>**Test Cases**. 
-3. Create a new test case. Optionally you can select an existing test case.
-4. Create the test steps for the test case.
-5. From the test step, select the NLP *Scan image from test data*, from the drop-down list of suggestions. 
-![scan_image_nlp](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/image-injection/scan_image_testdata.png)
-6. Delete test data from the NLP. Paste in the URL of the image or barcode or QR code file uploaded in *step 1.3*.
-![scan_image_nlp_url](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/image-injection/scan_image_testdata2.png)
-7. Wait for a couple of seconds for the image to be fully scanned.
-8. You can now execute your test case. Note that the image scanning feature can be used for both Ad-hoc executions and test plan executions. On execution of the test case, the image added in the NLP will be pushed for image injection on scanning.
+| - You can utilise the Image Injection feature, exclusively available for **Android** and **iOS** apps. 
+| - Ensure you upload image files in **PNG** format and wait a few seconds while the scanner scans the image.
+
+---
+
+### **Prerequisites**
+
+Before using Image Injection, you must understand specific concepts such as creating [Projects](https://testsigma.com/docs/projects/overview/), [Test Cases](https://testsigma.com/docs/test-cases/manage/add-edit-delete/), [Test Steps](https://testsigma.com/docs/test-cases/create-steps-nl/overview/), [Test Data Types](https://testsigma.com/docs/test-data/types/overview/), [Uploading Applications](https://testsigma.com/docs/uploads/upload-apps/), [Uploading Files](https://testsigma.com/docs/uploads/upload-files/), recording steps for [Android](https://testsigma.com/docs/test-cases/create-steps-recorder/android-apps/reorder/) and [iOS](https://testsigma.com/docs/test-cases/create-steps-recorder/ios-apps/reorder/), and performing Ad-hoc runs in [Android](https://testsigma.com/docs/runs/adhoc-runs/#android-application) and [iOS](https://testsigma.com/docs/runs/adhoc-runs/#ios-application).
+
+---
+
+## **Manual Image Injection using NLP**
+
+Using NLP in this method, you can manually add image injection steps to your test case. You can replace **test-data** with the image to add QR code images stored in your uploads.
+
+1. Select the **NLP - Scan image from test data** from the dropdown list of suggestions that appears in the test step by searching.
+2. Click the **test data** placeholder to replace it, and then select the **˄|Upload|** from the **Test Data Types** dropdown menu. Select the file you want to add to the test step from the **˄ Uploads** section on the right side of the screen. ![Manual Image Injection](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/overview/manual_image_injection.gif)
+3. Remember, using the image scanning feature, you can execute your **Test Cases** and **Test Plans**. You can turn on **Camera Image Injection** for both **Ad-hoc runs** and when **adding a machine or device** to a **Test Plan**. When you run the test case, you can use the image you added using NLP for image injection.
+
+---
+
+## **Camera Image Injection during Recording**
+
+During test step recording, you can simplify the image injection process by using the camera image injection feature to insert QR code images directly.
+
+1. Click the **Record** button at the screen's top right corner to bring up the Record Test Steps overlay. Then, choose the **Version**, **Device**, and **Application**. Enable the toggle button for **Camera Image Injection** while recording test steps. Finally, start recording the test step by clicking the **Record** button again.
+2. Click the **Scan Image (Camera)** icon in the right sidebar of the **Recording** Overlay to upload the QR code image. Select the file you want to add to the test step from the **˄ Uploads** overlay. ![Camera Image Injection](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/overview/camera_imageinjection.gif)
+
+---