1

我正在尝试在用户注册时设置 localStorage，但它只生成没有键值的文件。

如果我运行npx playwright codegen --save-storage=formsData.json 正常并生成键值，但生成的代码非常不同，我看不到 localStorage 是如何创建的。

我做错了什么，或者没有做什么？

这是我的测试代码：

const { test, expect } = require('@playwright/test');
const { buildUser } = require('./utils/generateUser');

test.describe('Register Form', () => {
    test('displays register form and can register user', async ({ browser }) => {
    const user = await buildUser();
    
    const page = await browser.newPage();
    
    await page.goto('http://localhost:3000/register');
    
    await expect(page).toHaveURL('http://localhost:3000/register');
    
    const firstNameInput = page.locator('[placeholder="Nombre"]');
    const lastNameInput = page.locator('[placeholder="Apellidos"]');
    const emailInput = page.locator('[placeholder="Email"]');
    const passwordInput = page.locator('[placeholder="Contraseña"]');
    const repeatPasswordInput = page.locator('[placeholder="Repite la contraseña"]');
    const registerButton = page.locator('text=Adelante');
    const termsCheckbox = page.locator('input[type="checkbox"]').first();
    const privacyCheckbox = page.locator('input[type="checkbox"]').last();
    const modalWindow = page.locator('.styles__ContentWrapper-n48cq5-0');
    const modalButton = page.locator('text=Aceptar');
    
    await expect(firstNameInput).toBeEmpty();
    await expect(lastNameInput).toBeEmpty();
    await expect(emailInput).toBeEmpty();
    await expect(passwordInput).toBeEmpty();
    await expect(repeatPasswordInput).toBeEmpty();
    await expect(registerButton).toBeDisabled();
    await expect(termsCheckbox).not.toBeChecked();
    await expect(privacyCheckbox).not.toBeChecked();
    await expect(modalWindow).toBeHidden();
    
    await firstNameInput.fill(user.nombre);
    await lastNameInput.fill(user.apellido);
    await emailInput.fill(user.email);
    await passwordInput.fill('12341234');
    await repeatPasswordInput.fill('12341234');
    await termsCheckbox.check();
    await privacyCheckbox.click();
    
    await expect(modalWindow).toBeVisible();
    
    await page.press(':nth-match(input[type="checkbox"], 2)', 'Tab');    
    await page.press('text=info@coinscrap.com', 'Tab');
        
    await await modalButton.click();
    
    await expect(registerButton).toBeEnabled();
    await registerButton.click();
    
    await page.context().storageState({ path: 'formsData.json' });
    await browser.close();
  });
});

这就是剧作家 codegen 所做的：

const { test, expect } = require('@playwright/test');
test('test', async ({ page }) => {
      // Go to http://localhost:3000/register
      await page.goto('http://localhost:3000/register');
      // Click [placeholder="Nombre"]
      await page.click('[placeholder="Nombre"]');
      // Fill [placeholder="Nombre"]
      await page.fill('[placeholder="Nombre"]', 'Pascale');
      // Click [placeholder="Apellidos"]
      await page.click('[placeholder="Apellidos"]');
      // Fill [placeholder="Apellidos"]
      await page.fill('[placeholder="Apellidos"]', 'Gusikowski');
      // Click [placeholder="Email"]
      await page.click('[placeholder="Email"]');
      // Fill [placeholder="Email"]
      await page.fill('[placeholder="Email"]', 'Pascale_Gusikowski86@gmail.com');
      // Click [placeholder="Contraseña"]
      await page.click('[placeholder="Contraseña"]');
      // Fill [placeholder="Contraseña"]
      await page.fill('[placeholder="Contraseña"]', '12341234');
      // Click [placeholder="Repite la contraseña"]
      await page.click('[placeholder="Repite la contraseña"]');
      // Fill [placeholder="Repite la contraseña"]
      await page.fill('[placeholder="Repite la contraseña"]', '12341234');
      // Check input[type="checkbox"]
      await page.check('input[type="checkbox"]');
      // Click text=1.1 -Decisiones automatizadas, perfiles y lógica aplicada Los datos recogidos me
      await page.click('text=1.1 -Decisiones automatizadas, perfiles y lógica aplicada Los datos recogidos me');
      // Press End
      await page.press('text=You need to enable JavaScript to run this app. Crea una cuenta​​​​​ AdelanteHe l', 'End');
      // Click text=Aceptar
      await page.click('text=Aceptar');
      // Click text=Adelante
      await Promise.all([
        page.waitForNavigation(/*{ url: 'http://localhost:3000/internal/banks/start' }*/),
        page.click('text=Adelante')
      ]);
});

没有创建 localStorage 的代码。我需要以编程方式进行。

我也尝试过：

const localStorage = await page.evaluate(() => JSON.stringify(window.localStorage));
fs.writeFileSync('formsData.json', localStorage);

它生成文件但不生成键、值。

4

1 回答 1

0

localStorage (DOMStorage) 与你提交的表单无关。当您提交表单时，通常会向服务器发出一个 POST 请求，将此数据发送到后端。看起来您的页面有额外的 JavaScript 代码，可以在某个时候将这些值存储到 localStorage 中。你的 localStorage 在你保存它的时候没有这些值，所以你应该弄清楚如何在你的页面上触发这个代码以及如何等待它。您可以打开 DevTools 并在控制台中评估“localStorage”，或者在“应用程序”选项卡中选择它，以查看这些值何时以及为何进入本地存储。

于 2021-09-11T04:07:29.303 回答