E2E to link a line in Web IDE

app/assets/javascripts/editor/extensions/editor_lite_extension_base.js

@@ -7,6 +7,8 @@ const createAnchor = (href) => {
   const fragment = new DocumentFragment();
   const el = document.createElement('a');
   el.classList.add('link-anchor');
+  el.setAttribute('data-qa-selector', 'line_link');
+  el.setAttribute('data-qa-number', href);
   el.href = href;
   fragment.appendChild(el);
   el.addEventListener('contextmenu', (e) => {

qa/qa/page/project/show.rb

@@ -147,7 +147,7 @@ module QA
         end
 
         def open_web_ide!
-          click_element :web_ide_button
+          click_element(:web_ide_button)
         end
 
         def has_edit_fork_button?

qa/qa/page/project/web_ide/edit.rb

@@ -18,8 +18,8 @@ module QA
           end
 
           view 'app/assets/javascripts/ide/components/ide_tree.vue' do
-            element :new_file_button
-            element :new_directory_button
+            element :new_file_button, required: true
+            element :new_directory_button, required: true
           end
 
           view 'app/assets/javascripts/ide/components/ide_tree_list.vue' do
@@ -108,6 +108,10 @@ module QA
             element :file_to_commit_content
           end
 
+          view 'app/assets/javascripts/editor/extensions/editor_lite_extension_base.js' do
+            element :line_link
+          end
+
           def has_file?(file_name)
             within_element(:file_list) do
               has_element?(:file_name_content, file_name: file_name)
@@ -305,6 +309,22 @@ module QA
           def switch_to_commit_tab
             click_element(:commit_mode_tab)
           end
+
+          def select_file(file_name)
+            # wait for the list of files to load
+            wait_until(reload: true) do
+              has_element?(:file_name_content, file_name: file_name)
+            end
+            click_element(:file_name_content, file_name: file_name)
+          end
+
+          def link_line(line_number)
+            wait_for_animated_element(:editor_container)
+            within_element(:editor_container) do
+              find('.line-numbers', text: line_number).hover
+              find_element(:line_link, number: "#L#{line_number}")['href'].to_s
+            end
+          end
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/web_ide/link_to_line_in_web_ide_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    describe 'Link to line in Web IDE' do
+      let(:user) { Resource::User.fabricate_or_use(Runtime::Env.gitlab_qa_username_1, Runtime::Env.gitlab_qa_password_1) }
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.template_name = 'express'
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+      end
+
+      after do
+        project.remove_via_api!
+      end
+
+      it 'can link to a specific line of code in Web IDE', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1102' do
+        project.visit!
+
+        Page::Project::Show.perform(&:open_web_ide!)
+
+        Page::Project::WebIDE::Edit.perform do |ide|
+          ide.select_file('app.js')
+          @link = ide.link_line('26')
+        end
+
+        Flow::Login.sign_in(as: user)
+
+        page.visit(@link)
+
+        Page::Project::WebIDE::Edit.perform do |ide|
+          expect(ide).to have_file('app.js')
+        end
+
+        expect(page.driver.current_url).to include('app.js/#L26')
+      end
+    end
+  end
+end