diff --git a/doc/source/development/catalog-introduction.rst b/doc/source/development/catalog-introduction.rst
new file mode 100644
index 00000000..bb14fdaa
--- /dev/null
+++ b/doc/source/development/catalog-introduction.rst
@@ -0,0 +1,2 @@
+Catalog Introduction
+~~~~~~~~~~~~~~~~~~~~
diff --git a/doc/source/development/how-to-develop.rst b/doc/source/development/how-to-develop.rst
new file mode 100644
index 00000000..8878c880
--- /dev/null
+++ b/doc/source/development/how-to-develop.rst
@@ -0,0 +1,2 @@
+How To Develop
+~~~~~~~~~~~~~~~
diff --git a/doc/source/development/index.rst b/doc/source/development/index.rst
index e733512c..a431bd77 100644
--- a/doc/source/development/index.rst
+++ b/doc/source/development/index.rst
@@ -2,5 +2,10 @@
 Development Guide
 ==================
 
+This section describes how to develop the Skyline Console.
+
 .. toctree::
-   :maxdepth: 1
+
+   ready-to-work
+   catalog-introduction
+   how-to-develop
diff --git a/doc/source/development/ready-to-work.rst b/doc/source/development/ready-to-work.rst
new file mode 100644
index 00000000..85ff2352
--- /dev/null
+++ b/doc/source/development/ready-to-work.rst
@@ -0,0 +1,2 @@
+Ready To Work
+~~~~~~~~~~~~~~
diff --git a/doc/source/test/catalog-introduction.rst b/doc/source/test/catalog-introduction.rst
new file mode 100644
index 00000000..90542461
--- /dev/null
+++ b/doc/source/test/catalog-introduction.rst
@@ -0,0 +1,99 @@
+Catalog Introduction
+~~~~~~~~~~~~~~~~~~~~
+
+   .. code-block:: text
+
+    test
+    ├── e2e (E2E code storage location)
+    │   ├── config
+    │   │   ├── config.yaml (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information)
+    │   │   └── local_config.yaml   (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information, which is gitignore and has a higher priority than config.yaml)
+    │   ├── fixtures    (Store upload files, read files, etc. required during operation)
+    │   │   ├── keypair (Test file read by key)
+    │   │   ├── metadata.json   (Test metadata read file)
+    │   │   ├── stack-content.yaml  (Files read by the test stack)
+    │   │   └── stack-params.yaml   (Files read by the test stack)
+    │   ├── integration (Store unit test)
+    │   │   └── pages   (Adjust the directory according to the webpage menu structure)
+    │   │       ├── compute (compute)
+    │   │       │   ├── aggregate.spec.js   (aggregate)
+    │   │       │   ├── baremetal.spec.js   (baremetal)
+    │   │       │   ├── flavor.spec.js  (instance flavor)
+    │   │       │   ├── hypervisor.spec.js  (hypervisor)
+    │   │       │   ├── image.spec.js   (image)
+    │   │       │   ├── instance.spec.js    (instance)
+    │   │       │   ├── ironic.spec.js  (ironic)
+    │   │       │   ├── keypair.spec.js (keypair)
+    │   │       │   └── server-group.spec.js    (server group)
+    │   │       ├── configuration   (Platform configuration)
+    │   │       │   ├── metadata.spec.js   (metadata)
+    │   │       │   └── system.spec.js  (system info)
+    │   │       ├── error.spec.js   (error page)
+    │   │       ├── heat    (heat)
+    │   │       │   └── stack.spec.js   (stack)
+    │   │       ├── identity    (identity)
+    │   │       │   ├── domain.spec.js  (Domain)
+    │   │       │   ├── project.spec.js (Project)
+    │   │       │   ├── role.spec.js    (Role)
+    │   │       │   ├── user-group.spec.js  (User group)
+    │   │       │   └── user.spec.js    (User)
+    │   │       ├── login.spec.js   (Login)
+    │   │       ├── management  (Operation management)
+    │   │       │   └── recycle-bin.spec.js (Recycle)
+    │   │       ├── network (Network)
+    │   │       │   ├── floatingip.spec.js  (Floating ip)
+    │   │       │   ├── lb.spec.js  (Loadbalance)
+    │   │       │   ├── network.spec.js (Network)
+    │   │       │   ├── qos-policy.spec.js  (Qos policy)
+    │   │       │   ├── router.spec.js  (Router)
+    │   │       │   ├── security-group.spec.js  (Security group)
+    │   │       │   ├── topology.spec.js    (Network topology)
+    │   │       │   ├── port.spec.js (Virtual Adapter)
+    │   │       │   └── vpn.spec.js (VPN)
+    │   │       └── storage (Storage)
+    │   │           ├── backup.spec.js  (Backup)
+    │   │           ├── qos.spec.js (QoS)
+    │   │           ├── snapshot.spec.js    (Volume snapshot)
+    │   │           ├── storage.spec.js (Storage)
+    │   │           ├── volume-type.spec.js (Volume type)
+    │   │           └── volume.spec.js  (Volume)
+    │   ├── plugins (Cypress plugins)
+    │   │   └── index.js    (Configured to read the configuration file, configured to use the code coverage function)
+    │   ├── report  (Store E2E test report)
+    │   │   ├── merge-report.html   (The final test report that records the execution of each use case)
+    │   │   └── merge-report.json   (Summary of test results in the results directory)
+    │   ├── results (Store test result files)
+    │   ├── screenshots (Store a snapshot of the test error)
+    │   ├── support (When writing a test case, double-wrapped function)
+    │   │   ├── commands.js (Store login, logout and other operation functions)
+    │   │   ├── common.js   (Store base functions)
+    │   │   ├── constants.js    (Store the route of each resource)
+    │   │   ├── detail-commands.js  (Store the functions related to the resource detail page, based on the framework, the operation of the detail page is consistent)
+    │   │   ├── form-commands.js  (Stores form-related functions, based on the framework, consistent with the operation of form items)
+    │   │   ├── index.js
+    │   │   ├── resource-commands.js    (Store functions related to resource operations, such as creating instance, creating router, deleting resources, etc.)
+    │   │   └── table-commands.js   (Store the functions related to the resource list based on the framework, and it has consistency in the operation of the lis)
+    │   └── utils   (Store the read function for the configuration file)
+    │       └── index.js
+    └── unit    (Unit test)
+        ├── local-storage-mock.js   ( Storage mock function in local)
+        ├── locales (Translation files used when testing internationalization)
+        │   ├── en-US.js
+        │   └── zh-CN.js
+        ├── setup-tests.js  (setup uni test)
+        └── svg-mock.js (Mock of image loading)
+
+#. E2E test code, stored in the ``test/e2e`` directory
+
+   -  Other global configurations of E2E are stored in ``cypress.json``
+
+#. The basic code of the unit test is stored in the ``test/unit`` directory
+
+   -  Other global configuration of unit test, stored in ``jest.config.js``
+
+   -  The test code of the unit test is usually placed in the same directory
+      as the file to be tested, and has a suffix of ``test.js`` or ``spec.js``
+
+      -  case: ``src/utils/index.js`` and ``src/utils/index.test.js``
+
+      -  case: ``src/utils/local-storage.js`` and ``src/utils/local-storage.spec.js``
diff --git a/doc/source/test/how-to-edit-e2e-case.rst b/doc/source/test/how-to-edit-e2e-case.rst
new file mode 100644
index 00000000..7b11f945
--- /dev/null
+++ b/doc/source/test/how-to-edit-e2e-case.rst
@@ -0,0 +1,142 @@
+How To Edit E2E Case
+~~~~~~~~~~~~~~~~~~~~
+
+For specific introduction and usage of Cypress, please refer to
+`Official document <https://docs.cypress.io/guides/overview/why-cypress>`__.
+
+Here we mainly give the E2E use cases corresponding to the resources in the
+front-end page of Skyline-console, and use function defined in ``test/e2e/support``
+
+The following is an introduction, taking the instance use case
+``test/e2e/integration/pages/compute/instance.spec.js`` as an example
+
+Generally, when testing the corresponding functions of a resource,
+follow the following order
+
+#. Prepare relevant variables in text
+
+   -  Required parameters when creating a resource, such as: name, password
+
+   -  Required parameters when editing resources, such as: new name
+
+   -  When creating an associated resource, the name of the associated resource,
+      such as: network name, router name, volume name
+
+   .. code-block:: javascript
+
+    const uuid = Cypress._.random(0, 1e6);
+    const name = `e2e-instance-${uuid}`;
+    const newname = `${name}-1`;
+    const password = 'passW0rd_1';
+    const volumeName = `e2e-instance-attach-volume-${uuid}`;
+    const networkName = `e2e-network-for-instance-${uuid}`;
+    const routerName = `e2e-router-for-instance-${uuid}`;
+
+#. Login before operation
+
+   -  If you are operating console resources, please use :guilabel:`cy.login`
+
+   -  If you are operating administrator resource, please use :guilabel:`cy.loginAdmin`
+
+   -  Generally, the variable :guilabel:`listUrl` is used in the
+      :guilabel:`login` and :guilabel:`loginAdmin` functions, that is,
+      directly access the page where the resource is located after logging in
+
+   .. code-block:: javascript
+
+    beforeEach(() => {
+        cy.login(listUrl);
+    });
+
+#. Create associated resources, use the resource creation function provided in
+   ``resource-commands.js``, take the test instance as an example
+
+   -  Create a network for testing to create a instance, attach interface
+
+   .. code-block:: javascript
+
+    cy.createNetwork({ name: networkName });
+
+   -  Create router :guilabel:`cy.createRouter` to ensure that the
+      floating IP is reachable when testing the associated floating IP
+
+      -  The router created in the following way will open the external network
+         gateway and bind the subnet of the :guilabel:`networkName` network
+
+   .. code-block:: javascript
+
+    cy.createRouter({ name: routerName, network: networkName });
+
+   -  Create floating ip :guilabel:`cy.createFip`,
+      Used to test associate floating ip
+
+   .. code-block:: javascript
+
+    cy.createFip();
+
+   -  Create volume :guilabel:`cy.createVolume` (Used to test attach volume)
+
+   .. code-block:: javascript
+
+    cy.createVolume(volumeName);
+
+#. Write cases for creating resources
+
+#. Write use cases for accessing resource details
+
+#. Write use cases corresponding to all operations of resources separately
+
+   Generally, the use case of the :guilabel:`edit` operation is written later,
+   and then the use case of the :guilabel:`delete` operation is written,
+   so that you can test whether the editing is effective
+
+#. To delete associated resources, use the resource-deleting function provided
+   in ``resource-commands.js``, this is to make the resources in the test
+   account as clean as possible after the test case is executed
+
+   -  Delete Floating IP
+
+   .. code-block:: javascript
+
+    cy.deleteAll('fip');
+
+   -  Delete Router :guilabel:`routerName`
+
+   .. code-block:: javascript
+
+    cy.deleteRouter(routerName, networkName);
+
+   -  Delete Network :guilabel:`networkName`
+
+   .. code-block:: javascript
+
+    cy.deleteAll('network', networkName);
+
+   -  Delete Volume :guilabel:`volumeName`
+
+   .. code-block:: javascript
+
+    cy.deleteAll('volume', volumeName);
+
+   -  Delete all available volume
+
+   .. code-block:: javascript
+
+    cy.deleteAllAvailableVolume();
+
+The ``4``, ``5``, and ``6`` in the above steps are mainly used
+
+- The function operation form in ``test/e2e/support/form-commands.js``,
+  please refer to the detailed introduction
+
+- The functions in ``test/e2e/support/table-commands.js``,
+  click on the buttons in the operation table, search, and enter for details.
+  please refer to the detailed introduction
+
+- The functions in ``test/e2e/support/detail-commands.js``, the operation
+  returns the list page, the detection details, and the switching details Tab.
+  please refer to the detailed introduction
+
+Create and delete associated resources mainly use the functions in
+``test/e2e/support/resource-commands.js``, please refer to the detailed
+introduction
diff --git a/doc/source/test/index.rst b/doc/source/test/index.rst
index 5b623afa..73c6e3ae 100644
--- a/doc/source/test/index.rst
+++ b/doc/source/test/index.rst
@@ -2,5 +2,10 @@
 Tests Guide
 ===========
 
+This section describes how to test the Skyline Console.
+
 .. toctree::
-   :maxdepth: 1
+
+   ready-to-work
+   catalog-introduction
+   how-to-edit-e2e-case
diff --git a/doc/source/test/ready-to-work.rst b/doc/source/test/ready-to-work.rst
new file mode 100644
index 00000000..0d1813af
--- /dev/null
+++ b/doc/source/test/ready-to-work.rst
@@ -0,0 +1,162 @@
+Ready To Work
+~~~~~~~~~~~~~~
+
+We provide two test methods
+
+- E2E test
+  - Focus on function point testing
+  - Can provide code coverage data
+  - User ``Cypress`` frame
+  - Test results are saved in a static page for easy preview
+- Unit test
+  - Focus on basic function testing
+  - User ``Jest`` frame
+
+E2E test
+---------
+
+#. Set up E2E test environment
+
+   .. note::
+
+      For more information about installation, refer to the :ref:`source-install-ubuntu`
+
+   E2E test environment has been successfully built in Centos and wsl2 of Windows
+
+   #. node environment
+
+      - requirement in package.json: ``"node": ">=10.22.0"``
+      - verify nodejs version
+
+      .. code-block:: console
+
+         node -v
+
+   #. install yarn
+
+      .. code-block:: console
+
+         npm install -g yarn
+
+
+   #. Install dependencies
+
+      - Execute in the project root directory, which is the same level as
+        ``package.json``, and wait patiently for the installation to complete
+
+      .. code-block:: console
+
+         yarn install
+
+   #. Install system dependencies
+
+      - `Ubuntu/Debian`
+
+      .. code-block:: console
+
+         sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+      - `CentOS`
+
+      .. code-block:: console
+
+         yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
+
+   #. Adjust the access path, account and other information
+
+      E2E configuration files are stored in ``test/e2e/config/config.yaml``,
+      Configured in it:
+
+      * :guilabel:`baseUrl`, test access path
+
+      * :guilabel:`env`, environment variable
+
+        - :guilabel:`switchToAdminProject`, Switch to the ``admin`` project
+          after logging in
+
+        - :guilabel:`username`, User name to access the console, a user with
+          console operation permissions is required
+
+        - :guilabel:`password`, Password to access the console
+
+        - :guilabel:`usernameAdmin`, The user name to access the management
+          platform, a user with the operation authority of the management
+          platform is required
+
+        - :guilabel:`passwordAdmin`, Password to access the management platform
+
+      * :guilabel:`testFiles`, Test files list
+
+      The configuration change can be completed by directly modifying
+      the corresponding value in ``config.yaml``
+
+      You can also complete configuration changes through ``local_config.yaml``
+
+      - Copy ``test/e2e/config/config.yaml`` to ``test/e2e/config/local_config.yaml``
+      - Modify the corresponding variables in ``local_config.yaml``
+      - For the value of the variable, the priority is: ``local_config.yaml`` > ``config.yaml``
+
+#. Command line run E2E
+
+   .. code-block:: console
+
+      yarn run test:e2e
+
+#. GUI running E2E
+
+   .. code-block:: console
+
+      yarn run test:e2e:open
+
+#. E2E test results
+
+   After the test run is over, visit ``test/e2e/report/merge-report.html`` to view
+
+#. E2E Code coverage test results
+
+   After the test run is over, visit ``coverage/lcov-report/index.html`` to view
+
+   .. note::
+
+      Code coverage, the front-end package corresponding to ``baseUrl`` that
+      needs E2E access, is  ``dist`` package with a detectable code coverage version
+
+   .. code-block:: console
+
+      yarn run build:test
+
+   The file packaged in the above way is a front-end package with testable
+   code coverage
+
+   Below, the nginx configuration for front-end access to the front-end
+   package with code coverage function is given
+
+   .. code-block:: nginx
+
+    server {
+      listen 0.0.0.0:8088 default_server;
+
+      root /path/to/skyline-console/dist;
+      index index.html;
+      server_name _;
+      location / {
+        try_files $uri $uri/ /index.html;
+      }
+
+      location /api {
+        proxy_pass http://<backend_address>;
+      }
+    }
+
+Unit test
+----------
+
+#. Command line run unit tests
+
+   .. code-block:: console
+
+      yarn run test:unit
+
+#. Unit test results
+
+   You can view the running results directly in the command line console