feat: Add variables e2e tests (no-changelog) (#6027)

* fix: fix n8n-checkbox alignment

* fix: use css variables in checkbox inner margin-top

* test: update snapshots

* feat: add variables e2e tests (no-changelog)

* test: update snapshot

packages/editor-ui/src/components/VariablesRow.vue

@@ -130,7 +130,7 @@ function focusFirstInput() {
 </script>
 
 <template>
-	<tr :class="$style.variablesRow">
+	<tr :class="$style.variablesRow" data-test-id="variables-row">
 		<td class="variables-key-column">
 			<div>
 				<span v-if="!editing">{{ data.key }}</span>

packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`VariablesRow > should render correctly 1`] = `
-"<tr class=\\"variablesRow\\">
+"<tr data-test-id=\\"variables-row\\" class=\\"variablesRow\\">
   <td class=\\"variables-key-column\\">
     <div><span>key</span></div>
   </td>
@@ -29,7 +29,7 @@ exports[`VariablesRow > should render correctly 1`] = `
 `;
 
 exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
-"<tr class=\\"variablesRow\\">
+"<tr data-test-id=\\"variables-row\\" class=\\"variablesRow\\">
   <td class=\\"variables-key-column\\">
     <div>
       <div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">

packages/editor-ui/src/views/VariablesView.vue

@@ -259,7 +259,7 @@ function displayName(resource: EnvironmentVariable) {
 		</template>
 		<template v-if="!isFeatureEnabled" #empty>
 			<n8n-action-box
-				data-test-id="empty-resources-list"
+				data-test-id="unavailable-resources-list"
 				emoji="👋"
 				:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
 				:description="