#LynxRecorder

#Download and install LynxExplorer

Please visit LynxExplorer and follow the documentation to run Lynx Explorer app locally.

#Download and install Lynx Devtool Application

The Lynx Devtool Application integrates the LynxRecorder control plugin, making it easy to control page record, obtain recorded artifacts, and perform other related operations.

You can visit Lynx DevTool to get the latest version of Lynx DevTool desktop application.

#Start record

1. Connect the device to your PC via USB, and select the target application in the Tab.

2. Enter the LynxRecorder plugin dashboard and click the Start button to activate.

3. Operate on your phone, navigate to the target page you want to record and interact with it until it reaches the desired state.

Here is a sample page that you can access by scanning the QR code or entering the link in LynxExplorer.

gallerysrc/GalleryComplete/index.tsx

Preview

5. Click the Stop button to end the record.

After stopping the record, the LynxRecorder dashboard will automatically retrieve the recorded artifact from your device and provide a preview image to help you easily identify the target page.

#Page Replay

1. Artifact Hosting

The Lynx DevTool Application only provides local file hosting for each recorded artifact. If you need to share the record artifact or access it across devices, you will need to host the artifact separately.

2. Replay using LynxExplorer

Here is a sample recorded artifact that you can replay by scanning the QR code or entering the link in LynxExplorer.

https://lynx.recorder.artifacts/LynxRecorder.json

file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json

LynxExplorer can fully reproduce the recorded page.

#Switch to the dev version

Since the record and replay process of LynxRecorder covers the entire rendering process of Lynx and requires support from the underlying Lynx engine, we have released a separate dev version apart from the official Lynx release to prevent these record-related codes from affecting production environments. If you want to integrate LynxRecorder, you need to change the version numbers of both Lynx and LynxDevtool in your project to the corresponding dev versions. integrate lynx dev version

#Record capability integration

The record capability can be integrated simply by using the dev version, with no additional adaptation required.

#Replay capability integration

LynxRecorder provides a highly encapsulated replay module, which is integrated into your application together with LynxDevTool. You only need to provide a simple entry point as described below.

#Android

1. Add a LynxRecorder page entry

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import com.lynx.devtool.recorder.LynxRecorderActivity;
import com.lynx.devtool.recorder.LynxRecorderEnv;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        buildLynxRecorderView();
    }

    private LynxView buildLynxRecordView() {
        String url = "file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json"
        Intent intent = new Intent(this, LynxRecorderActivity.class);
        intent.putExtra(LynxRecorderEnv.getInstance().mUriKey, url);
        startActivity(intent);
    }

}

2. Register LynxRecorderActivity in the app manifest file.

// AndroidManifest.xml
<activity
    android:name="com.lynx.devtool.recorder.LynxRecorderActivity"
    android:exported="false" />

#iOS

1. In the Podfile, additionally include LynxRecorder for the LynxDevtool module.

pod 'LynxDevtool', lynxDevVersion, :subspecs => [
    'Framework',
    'LynxRecorder'
]

2. Use LynxRecorderViewController to replay the recorded page.

#import <LynxDevtool/LynxRecorderViewController.h>

#import <LynxDevtool/LynxRecorderViewController.h>

LynxRecorderViewController *recorderVC = [[LynxRecorderViewController alloc] init];
recorderVC.url = @"file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json";
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:recorderVC];
[self presentViewController:nav animated:YES completion:nil];