முக்கிய உள்ளடக்கத்திற்கு செல்க

SolidJS

SolidJS என்பது எளிமையான மற்றும் செயல்திறன் மிக்க வினைத்திறனுடன் பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு கட்டமைப்பாகும். WebdriverIO மற்றும் அதன் browser runner பயன்படுத்தி SolidJS காம்போனென்டுகளை உண்மையான பிரௌசரில் நேரடியாகச் சோதிக்கலாம்.

செட்அப்

உங்கள் ரியாக்ட் ப்ரொஜெக்ட்டில் WebdriverIO ஐ அமைக்க, எங்கள் காம்போனென்ட் டெஸ்ட் ஆவணத்தின் instructions வழிமுறைகளைப் பின்பற்றவும். உங்கள் ரன்னர் விருப்பங்களில ் solid முன்னமைவாகத் தேர்ந்தெடுக்கவும், எ.கா.:

// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'solid'
}],
// ...
}
தகவல்

நீங்கள் ஏற்கனவே Vite டெவலப்மென்ட் சர்வராகப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் WebdriverIO கட்டமைப்பிற்குள் vite.config.ts இல் உங்கள் கட்டமைப்பை மீண்டும் பயன்படுத்தலாம். மேலும் தகவலுக்கு, viteConfig இன் ரன்னர் விருப்பங்கள்ஐப் பார்க்கவும்.

SolidJS முன்னமைவுக்கு vite-plugin-solid நிறுவப்பட வேண்டும்:

npm install --save-dev vite-plugin-solid

பின்னர் நீங்கள் டெஸ்டுகளை ரன் செய்வதன் மூலம் தொடங்கலாம்:

npx wdio run ./wdio.conf.js

டெஸ்டுகளை எழுதுதல்

பின்வரும் SolidJS கூறு உங்களிடம் இருப்பதால்:

./components/Component.tsx
import { createSignal } from 'solid-js'

function App() {
const [theme, setTheme] = createSignal('light')

const toggleTheme = () => {
const nextTheme = theme() === 'light' ? 'dark' : 'light'
setTheme(nextTheme)
}

return <button onClick={toggleTheme}>
Current theme: {theme()}
</button>
}

export default App

உங்கள் டெஸ்டில் solid-js/web இலிருந்து render முறையைப் பயன்படுத்தி டெஸ்ட் பக்கத்துடன் காம்போனென்டுகளை இணைக்கவும். காம்போனென்டுகளுடன் தொடர்பு கொள்ள WebdriverIO கட்டளைகளைப் பயன்படுத்தப் பரிந்துரைக்கிறோம், ஏனெனில் அவை உண்மையான பயனர் தொடர்புகளுக்கு மிகவும் நெருக்கமாகச் செயல்படுகின்றன, எ.கா.:

app.test.tsx
import { expect } from '@wdio/globals'
import { render } from 'solid-js/web'

import App from './components/Component.jsx'

describe('Solid Component Testing', () => {
/**
* ensure we render the component for every test in a
* new root container
*/
let root: Element
beforeEach(() => {
if (root) {
root.remove()
}

root = document.createElement('div')
document.body.appendChild(root)
})

it('Test theme button toggle', async () => {
render(<App />, root)
const buttonEl = await $('button')

await buttonEl.click()
expect(buttonEl).toContainHTML('dark')
})
})

SolidJS க்கான WebdriverIO காம்போனென்ட் டெஸ்ட் தொகுப்பின் முழு உதாரணத்தையும் எங்களின் example repositoryஇல் காணலாம்.

Welcome! How can I help?

WebdriverIO AI Copilot